JQuery drag-and-drop plug-in implementation code_jquery

Many page effects use these locations. As a last resort, you have to practice and remember.
Let’s talk about this simple drag-and-drop plug-in based on JQuery.
As usual, let’s first talk about the principle of drag and drop, and the steps to create such a thing:
So what is drag and drop? You can tell just by looking at the name: it drags something around. Putting it on our DOM means changing its position.
There are only two difficulties: 1. How to know if it is dragging? 2. How to know where to drag from and where to drag?
Actually, this is not difficult. After all, both are basic things. The key lies in proficiency.
Switch to js, ​​we create a drag effect, the steps are as follows:
1. Let the element capture the event (usually, it is nothing more than mousedown, mousemove, mouseup)
2. During mousedown , marks the start of dragging, and obtains the position of the element and mouse.
3. During mousemove, continuously obtain the new position of the mouse, and reposition the element through the corresponding position algorithm.
4. During mouseup, end dragging. . . Then the cycle starts over again.
In the middle, there is one thing that needs attention: the dragged element needs to be at least relatively or absolutely positioned, otherwise the drag will have no effect.
OK, no more words, no code, no truth. The corresponding explanations are in it:
Download:

Copy the code The code is as follows:

< ;/html>