I remember that when I first came into contact with the front-end a few years ago, it was a great thing to think that I could drag elements on a webpage. It was a great thing to write such code. So google, baidu has a lot of code to learn and roughly understands the ideas. The following is a summary: 1. Three events to be dragged, onmousedown, onmousemove, and onmouseup
2. The onmousemove event is used to handle the changes in the position of the dragged element. In fact, the distance between the elements to be moved is the distance between the two moves of the mouse.
3. It also includes setCapture and releaseCapture, so that the migrated elements can always have focus.
In the past, it was generally the previous understanding. For more information, see the JS drag technology-about setCapture implementation. Later, with the improvement of work requirements, we will do a lot of work across browsers, so we re-conceived and implemented it by referring to some open-source code.
The general idea is as follows.
1. Are we moving for the purpose of dragging? Of course not, for example, google Maps, after each move, it aims to calculate the coordinates of the current space to load geographic information. So I designed several common events here. The following is the event list
OnDragStart: When an element is dragged, if this event is registered, two parameters x and y are received when the element is triggered, which are the coordinates when the element is dragged.
OnDrag
OnDragEnd: if the event is registered when the element ends, two parameters x and y are received as the current coordinates of the migrated element.
2. Who should the onmousedown event be bound? Previously, I was bound to a drag-and-drop element. Later I found that it was not flexible. Now it is designed to bind to any irrelevant element while dragging the element.
3. How can we keep the focus in the element moving process? Because cross-browser operations are required, methods such as setCapture are no longer used. Here, I think differently. Why is there no focus in element moving, the main reason is that we register the onmousemove event to the dragged element, which is not necessary. Therefore, when the element triggers the onmousedown event, I register the onmousemove and onmouseup events directly on the document, so that there will be focus when you move the cursor anywhere.
After that, let's look at the code structure!
The Code is as follows:
Drag = {
Obj: null,
Init: function (options ){
Options. handler. onmousedown = this. start;
Options. handler. root = options. root | options. handler;
Var root = options. handler. root;
Root. onDragStart = options. dragStart | new Function ();
Root. onDrag = options. onDrag | new Function ();
Root. onDragEnd = options. onDragEnd | new Function ();
},
Start: function (e) {// at this time, this is handler
Var obj = Drag. obj = this;
Obj. style. cursor = 'move ';
E = e | Drag. fixEvent (window. event );
Ex = e. pageX;
Ey = e. pageY;
Obj. lastMouseX = ex;
Obj. lastMouseY = ey;
Var x = obj. root. offsetLeft;
Var y = obj. root .. offsetTop;
Obj. root. style. left = x + "px ";
Obj. root. style. top = y + "px ";
Document. onmouseup = Drag. end;
Document. onmousemove = Drag. drag;
Obj. root. onDragStart (x, y );
},
Drag: function (e ){
E = e | Drag. fixEvent (window. event );
Ex = e. pageX;
Ey = e. pageY;
Var root = Drag. obj. root;
Var x = root. style. left? ParseInt (root. style. left): 0;
Var y = root. style. top? ParseInt (root. style. top): 0;
Var nx = ex-Drag. obj. lastMouseX + x;
Var ny = ey-Drag. obj. lastMouseY + y;
Root. style. left = nx + "px ";
Root. style. top = ny + "px ";
Drag. obj. root. onDrag (nx, ny );
Drag. obj. lastMouseX = ex;
Drag. obj. lastMouseY = ey;
},
End: function (e ){
Var x = Drag. obj. root. style. left? ParseInt (Drag. obj. root. style. left): 0;
Var y = Drag. obj. root. style. top? ParseInt (Drag. obj. root. style. top): 0;
Drag. obj. root. onDragEnd (x, y );
Document. onmousemove = null;
Document. onmouseup = null;
Drag. obj = null;
},
FixEvent: function (e ){
E. pageX = e. clientX + document.doc umentElement. scrollLeft;
E. pageY = e. clientY + document.doc umentElement. scrollTop;
Return e;
}
}
The above init mainly deals with some preliminary work, such as recording the onDragStart, onDrag, and onDragEnd events. handler is the element that handles the drag event, and root is the dragged element.
When the Drag. start method is triggered after clicking on handler, Drag. start records the location of the mouse over the entire page, registers onmouseup and onmousemove events for the document, and triggers the onDragStart event.
The Drag. drag method is also very simple. It is mainly used to update the position of the moved element and record the position of the mouse relative to the entire page.
The Drag. end method is simpler, that is, some final work.
Finally, we will provide you with the code used in the section. I wish you a pleasant learning experience!
The Code is as follows:
Drag. init ({
Handler: document. getElementById ("handler "),
Root: document. getElementById ("root ");
});
