Native js drag and drop (lesson 1 not compatible) drag and drop ideas_javascript skills

Copy code The code is as follows:

/*
Drag and drop process:
1. Chapter Click on the element that needs to be dragged in one step
2. The element under click is selected and moved
3. When the mouse bounces up, the action stops
4. When the element oDIV is clicked, it is available is the oDIV area, while move and up are global areas, which are common to the entire document, that is, document
*/
oDIV = document.getElementById("gaga");
oDIV.onmousedown = should be used function( e ){ // When the mouse is clicked
var diffX = e.clientX - oDIV.offsetLeft; // The clicked position is from the leftmost position of the browser (clientX) minus the distance from the clicked element The left position (oDIV.offetLeft) is uncertain from the leftmost position of the clicked element in the trigger, so this result is needed
var diffY = e.clientY - oDIV.offsetTop; // The distance between the clicked element and the browser The position of the top (clientY) is subtracted from the position of the clicked element from the top (oDIV.offsetTop). The position of the clicked element from the top is uncertain, so this result is needed
document.onmousemove = function( e ){ // When the mouse is pressed and held
var e = e || window.event;
oDIV.style.top = e.clientY - diffY "px";
oDIV.style. left = e.clientX - diffX "px";
};
document.onmouseup = function(){ // When the mouse bounces up
document.onmousemove = null; // Clear the mouse button Events where the mouse is not released
document.onmouseup = null; // Clear mouse up events
}
};