1. To be dragged three events, onmousedown, onmousemove, onmouseup
2. In the onmousemove event, we deal with the change in the position of the dragged element. In fact, to put it bluntly, the distance the element needs to move is the distance between the two movements of the mouse.
3. It also includes setCapture and releaseCapture, the purpose is to always have focus on the elements being moved.
It was roughly what I knew before, so please seeJS drag technology ---- About setCaptureLater, with the increase in work requirements, the work done was cross-browser, so I reconceived and referred to some open source code to implement it.
Now the general idea can be analyzed into the following steps, and I will show it for you one by one.
1. Are we moving for the sake of dragging? Of course not, such as Google Maps, when each move, its purpose is to calculate the current spatial coordinates to load geographic information. So I designed a few common events here. The following is a list of events
onDragStart: When an element is dragged, if the event is registered, two parameters x and y will be received when triggered.
onDrag: If the event is registered during element dragging, the offset of the coordinates during dragging of two parameters nx and ny will be received when triggered.
onDragEnd: When the element ends, if the event is registered, two parameters x and y will be received when triggered, respectively, which are the current coordinates of the moved element.
2. Who should the onmousedown event be bound to? In the past, I used to bind to drag elements, but later I found it was very inflexible. Now it is designed to bind to any unrelated element and implement drag of the element at the same time.
3. How to achieve the focus of elements transfer? Because we need to cross-browser, we no longer use setCapture and other methods. Here we change our thinking, why is there no focus during the element element transfer? The main reason is that we register the onmousemove event with the dragged element, which is not necessary. So when the element triggers the onmousedown event, I directly register the onmousemove and onmouseup events to the document, so that there will be focus wherever the mouse moves.
After saying so much, just look at the code structure!
Drag = {
obj: null,
init: function (options) {
= ;
= || ;
var root = ;
= || new Function();
= || new Function();
= || new Function();
},
start: function (e) {//This is handler at this time
var obj = = this;
= 'move';
e = e || ();
ex = ;
ey = ;
= ex;
= ey;
var x = ;
var y = ..offsetTop;
= x + "px";
= y + "px";
= ;
= ;
(x, y);
},
drag: function (e) {
e = e || ();
ex = ;
ey = ;
var root = ;
var x = ? parseInt() : 0;
var y = ? parseInt() : 0;
var nx = ex - + x;
var ny = ey - + y;
= nx + "px";
= ny + "px";
(nx, ny);
= ex;
= ey;
},
end: function (e) {
var x = ? parseInt() : 0;
var y = ? parseInt() : 0;
(x, y);
= null;
= null;
= null;
},
fixEvent: function (e) {
= + ;
= + ;
return e;
}
}
The above init mainly deals with some preliminary work, such as recording onDragStart, onDrag, and onDragEnd events. The handler is the element that handles the drag event, and the root is the dragged element.
When clicking on the handler, the method is mainly to record the position of the mouse relative to the entire page; register the onmouseup and onmousemove events for the document, and trigger the onDragStart event.
The method is also very simple. The main function is to update the position of the moved element and record the position of the mouse relative to the entire page.
The method is even simpler, it is to do some finishing work.
Finally, I will attach the code used in paragraphs to you, I wish you all a happy learning!
({
handler: ("handler"),
root:("root");
});
<div >
<h2 ></h2>
</div>
2. In the onmousemove event, we deal with the change in the position of the dragged element. In fact, to put it bluntly, the distance the element needs to move is the distance between the two movements of the mouse.
3. It also includes setCapture and releaseCapture, the purpose is to always have focus on the elements being moved.
It was roughly what I knew before, so please seeJS drag technology ---- About setCaptureLater, with the increase in work requirements, the work done was cross-browser, so I reconceived and referred to some open source code to implement it.
Now the general idea can be analyzed into the following steps, and I will show it for you one by one.
1. Are we moving for the sake of dragging? Of course not, such as Google Maps, when each move, its purpose is to calculate the current spatial coordinates to load geographic information. So I designed a few common events here. The following is a list of events
onDragStart: When an element is dragged, if the event is registered, two parameters x and y will be received when triggered.
onDrag: If the event is registered during element dragging, the offset of the coordinates during dragging of two parameters nx and ny will be received when triggered.
onDragEnd: When the element ends, if the event is registered, two parameters x and y will be received when triggered, respectively, which are the current coordinates of the moved element.
2. Who should the onmousedown event be bound to? In the past, I used to bind to drag elements, but later I found it was very inflexible. Now it is designed to bind to any unrelated element and implement drag of the element at the same time.
3. How to achieve the focus of elements transfer? Because we need to cross-browser, we no longer use setCapture and other methods. Here we change our thinking, why is there no focus during the element element transfer? The main reason is that we register the onmousemove event with the dragged element, which is not necessary. So when the element triggers the onmousedown event, I directly register the onmousemove and onmouseup events to the document, so that there will be focus wherever the mouse moves.
After saying so much, just look at the code structure!
Copy the codeThe code is as follows:
Drag = {
obj: null,
init: function (options) {
= ;
= || ;
var root = ;
= || new Function();
= || new Function();
= || new Function();
},
start: function (e) {//This is handler at this time
var obj = = this;
= 'move';
e = e || ();
ex = ;
ey = ;
= ex;
= ey;
var x = ;
var y = ..offsetTop;
= x + "px";
= y + "px";
= ;
= ;
(x, y);
},
drag: function (e) {
e = e || ();
ex = ;
ey = ;
var root = ;
var x = ? parseInt() : 0;
var y = ? parseInt() : 0;
var nx = ex - + x;
var ny = ey - + y;
= nx + "px";
= ny + "px";
(nx, ny);
= ex;
= ey;
},
end: function (e) {
var x = ? parseInt() : 0;
var y = ? parseInt() : 0;
(x, y);
= null;
= null;
= null;
},
fixEvent: function (e) {
= + ;
= + ;
return e;
}
}
The above init mainly deals with some preliminary work, such as recording onDragStart, onDrag, and onDragEnd events. The handler is the element that handles the drag event, and the root is the dragged element.
When clicking on the handler, the method is mainly to record the position of the mouse relative to the entire page; register the onmouseup and onmousemove events for the document, and trigger the onDragStart event.
The method is also very simple. The main function is to update the position of the moved element and record the position of the mouse relative to the entire page.
The method is even simpler, it is to do some finishing work.
Finally, I will attach the code used in paragraphs to you, I wish you all a happy learning!
Copy the codeThe code is as follows:
({
handler: ("handler"),
root:("root");
});
<div >
<h2 ></h2>
</div>