For a long time, I have been very confused about the position of elements obtained by JS: client, offset, and scroll. In addition, the incompatibility between various browsers makes it dizzy. Many page effects require these locations. You have to practice and remember.
Let's talk about this simple JQuery-based drag-and-drop plug-in.
By convention, let's first talk about the drag and drop principle and the steps for doing this stuff:
What is drag? You can see the name: drag a stuff. Put it on our DOM to change its position.
It has only two difficulties: 1. How do you know it is dragging? 2. How do I know where to drag and drag?
In fact, this is not difficult. After all, both are basic things, and the key is proficiency.
To switch to js, let's make a drag effect. The steps are as follows:
1. Let elements capture events (generally, they are nothing more than mousedown, mousemove, and mouseup)
2. When mousedown, Mark start dragging and obtain the element and mouse position.
3. During mousemove, You can constantly obtain the new location of the mouse and use the corresponding location algorithm to locate the element position again.
4. When mouseup is enabled, stop dragging... And then start again.
In the middle of this section, you must note that the elements to be dragged must at least be relatively or absolutely located; otherwise, the drag operation will not work.
OK. I don't know much about it. There is no code or truth. The corresponding explanations are as follows:
Download:
The Code is as follows:
Jeremy-DragDrop Test!
