Depth analysis of JS drag and drop effect

Drag-and-drop effect, also called drag-and-drop, the scientific name Drag-and-drop, is one of the most common JS effects.
If you ignore a lot of details, the implementation is simple, but often the details are difficult.
The prototype of the program is done when the image cutting effect, when the reference to several similar effects, with MUXRWC and Bluedestiny learned a lot of things.
Although it feels good to organize every time, every once in a while will find somewhere to improve, somewhere there are mistakes, some needs to be realized, just like the knowledge of their own learning.

Here, considering that some people may only need simple drag and drop, so there is a simplified version of the drag-and-drop Simpledrag, easy to learn.

The following is the HTML page special effects code, click the Run button to see the effect:
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]