Let's write some JS drag code_javascript skills

1. There are three events to be dragged, onmousedown, onmousemove, and onmouseup
2. In the onmousemove event, the position change of the dragged element is processed. In fact, to put it bluntly, the distance the element needs to move is the distance between the two movements of the mouse. distance between.
3. It also includes setCapture and releaseCapture. The purpose is to ensure that the moved element always has focus.
This is roughly the previous understanding. You can refer to JS drag technology---about the implementation of setCapture. Later, with the improvement of work requirements, all the work must be cross-browser, so I re-conceived and implemented it with reference to some open source code.
Now the general idea can be analyzed into the following steps, I will show you one by one.
1. Are we moving for the sake of dragging? Of course not, like Google Maps, its purpose is to calculate the current spatial coordinates to load geographical information after each move. So I have designed several common events here. The following is the event list
onDragStart: When an element is dragged, if you register this event, it will receive two parameters x and y when triggered, which are the coordinates of the moved element when it is dragged.
onDrag: Element dragging During the process, if you register this event, you will receive two parameters nx and ny when it is triggered. The offset of the coordinates during the dragging process
onDragEnd: When the element ends, if you register this event, you will receive two parameters when it is triggered. The parameters x and y are respectively the current coordinates of the moved element
2. Who should the onmousedown event be bound to? In the past, I bound it to the dragged element. Later, I found that it was very inflexible. Now it is designed to be bindable. Given any unrelated elements, drag the elements at the same time.
3. How to ensure that the element always has focus during the moving process? Because it is cross-browser, we no longer use methods such as setCapture. Here is another way of thinking, why is there no focus during the element moving process? The main reason is that we register the onmousemove event to the dragged element, and this It is not necessary, so when the element triggers the onmousedown event, I register the onmousemove and onmouseup events directly to the document, so that wherever the mouse moves, there will be focus.
After saying so much, let’s look directly at the code structure!

Copy code 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) {//This is handler at this time
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.documentElement.scrollLeft ;
e.pageY = e.clientY document.documentElement.scrollTop;
return e;
}
}

The above init mainly handles some initialization work, such as recording the three events of onDragStart, onDrag, and onDragEnd. The handler is the element that handles the drag event, and the root is the dragged element.
When the handler is clicked, the Drag.start method is triggered. Drag.start mainly records the position of the mouse relative to the entire page; registers onmouseup and onmousemove events for the document, and triggers the onDragStart event.
The Drag.drag method is also very simple. Its main function is 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 even simpler, just do some finishing work.

Finally, I’ll attach the code for you to use. I wish you all a happy learning!

Copy code The code is as follows:

Drag.init({
handler: document. getElementById("handler"),
root:document.getElementById("root");
});