Principle or step analysis of dragging
The initial position of the element, the mouse coordinates and the last mouse coordinates after dragging are known
- First click the element to get the initial position of the element and the initial position of the mouse
- When moving, get the last position of the mouse and calculate the distance difference of the mouse (the distance difference of the mouse = the last moving mouse position - the initial mouse position)
- The final position of the element = the initial position of the element + the distance difference of the mouse. Assign the X-axis and Y-axis positions of the final element to the left and top elements. Note: take care of both directions;
- Finally, both the mouse movement event and the mouse pop-up event should be unbound
Above
Code demonstration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">Nine days to the moon</div>
<script>
var box = document.querySelector('.box');
box.onmousedown = function(e) {
// Event object compatibility
e = e || window.e
// Mouse initial coordinates
var initialX = e.clientX
var initialY = e.clientY
// Initial position of element
var boxoffsetY = box.offsetTop
var boxoffsetX = box.offsetLeft
// The movement is triggered when the mouse is pressed, so it has to be written in the mouse press event
document.onmousemove = function(e) {
// Event object compatibility
e = e || window.e
// The last coordinate of the mouse
var atLastX = e.clientX
var atLastY = e.clientY
// The mouse difference is obtained by subtracting the initial mouse coordinates from the final mouse coordinates
var finallyX = atLastX - initialX
var finallyY = atLastY - initialY
// Position of final element = initial position of element + mouse difference
var boxLeft = boxoffsetX + finallyX
var boxTop = boxoffsetY + finallyY
// //Limit out of bounds
if (boxLeft < 0) {
boxLeft = 0
} else if (boxLeft > document.documentElement.clientWidth - box.clientWidth) { //If you can move more than the width of the viewport, it means that the element runs out, so we make the element equal to the width of the viewport and the element can't run out
boxLeft = document.documentElement.clientWidth - box.clientWidth;
}
if (boxTop < 0) {
boxTop = 0
} else if (boxTop > document.documentElement.clientHeight - box.clientHeight) {
boxTop = document.documentElement.clientHeight - box.clientHeight
}
box.style.left = boxLeft + 'px'
box.style.top = boxTop + 'px'
}
// Finally, the mouse pops up
document.onmouseup = function() {
// Unbinding event unbinding movement event and bounce event
document.onmousemove = null
document.onmouseup = null
}
// Block default behavior traditional block default behavior return false listening block default behavior e.preventDefault();
return false
}
</script>
</body>
</html>
bug analysis of mouse dragging
1. Although our div can follow the mouse to drag, there are still bug s in it. You will find that when you press the mouse to move away from the div, the div does not follow, and when your mouse pops up and the mouse returns to the div again, the div miraculously moves with the mouse mark. At this time, we should consider whether there is a problem with the event source?, Why is that? This is because every time we move, the computer is calculating the coordinates of our mouse and assigning the new coordinates to Div. when we move the mouse instantaneously, the computer has not responded to assign the new coordinates to div, so only the mouse moves and div does not follow the mouse. When the mouse is separated from div, Then your mouse pop-up operation is operated outside the div (at this time, the mouse pop-up operation is operated on the body), which has nothing to do with the div, so when you pop up the mouse, move into the div again, so the div can follow. How can we solve this problem? We need to add events to the document and use the event bubble principle to solve the movement of elements. When the mouse moves out of the element, we still have to effectively use event bubble to affect Div
2. If there are words in the div, when we select the text to drag the div, we find that the div does not go, but the text is dragging. This is because of the default behavior of the browser. We only need to add return flash or e.preventDefault() traditional event plus return flash listening event addEventListener plus e.preventDefault() to prevent the default behavior of the browser
3. If we want to be compatible with ie, we find that the default drag of IE still exists when we prevent it by default, which proves that the default behavior of ie does not include this drag, so we need to capture it globally; box. setCapture && box. setCapture(); When the mouse clicks an element, all subsequent events of the mouse are captured on the element. box. releaseCapture&& box. releaseCapture(); The event of the mouse is captured globally. If it is added, it must be released. Otherwise, clicking anywhere in the subsequent sequence is equivalent to clicking the attribute box to add it to the pop-up event