Today, it is how to achieve under native JS drag and drop functionality - can only be dragged within range of drag. Ideas to achieve this function, that is: by changing the position of dragging elements (left, top).
In this feature, we need to consider three events and two critical points.
Drag three events:
-
- Mouse down - mousedown
- Mouse movement - onmousemove
- Mouse lift - mouseup
Two critical points:
-
- The minimum critical point
- The maximum critical point
Next, let's write the code html and css styles. We define a container wrapper can drag and drag a box box.
// CSS
*{ margin: 0; padding: 0; } .wrapper{
position:relative; width: 500px; height: 500px; margin: 150px auto; border: 1px solid #000; } .box{ position: absolute; width: 200px; height: 200px; background-color: red; cursor: move; }
// HTML <div class="wrapper"> <div class="box"></div> </div>
HTML and CSS written, then we have to write JS.
First we have to get to the wrapper and box the two elements. Using document.getElementsByClassName ( 'className') [0]. Because getElementByClassName acquired is a data type array. As shown below:
Then, we came to realize monitor [mouse] function, in order to follow-up when the mouse is removed can drag [range], where we first get wrapper elements.
var wrap= document.getElementByClassName('wrapper')[0],
oBox = document.getElementByClassName('box')[0]
oBox.addEventListener('mousedown', function(e){
var lastX = e.clientX,
lastY = e.clientY;
});
[] Mouse movement, this time we want to get the coordinates of the mouse is moving at this time, and calculate the difference between this time and the coordinates on a coordinate.
FIG resolved as follows: a mouse down position, is moved to the point b, at this time need to calculate the moving distance of the vertical and horizontal.
= document.onmousemove function (E) {
// here, why should document? Instead oBox? If oBox, when the mouse fast-moving, will move blocks (box) off, not with the mouse movement.
// If the subsequent set only drag the mouse in drag box, where you can use oBox, but behind the corresponding mouse motion events also need to use oBox. var nowX = e.clientX, Nowy = e.clientY var disX = nowX - lastX, disY = Nowy - lastY var left = oBox.offsetLeft + disX, the offsetLeft // current element is the distance from the parent element Top = oBox.offsetTop + disY }
In css, we have to set the relative positioning of the wrapper, box elements to set absolute positioning, this time, we can be left and top assignments in the code above to the box element
oBox.style.left = left + 'px'
oBox.style.top = top + 'px'
* In this case, note that, as the process of dragging the mouse was kept moving, so that, at this time the initial point (a) and a movement end point (b) is changing, so we need to give a starting point the horizontal and vertical distance assignment.
lastX = nowX
lastY = new
[Lift] mouse: the mouse down and mouse movement realize, that when we drag the box element to the destination point of time, this time, we need to implement to lift the mouse function. code show as below:
document.onmouseup = function(){ document.onmousemove = null; }
Drag and drop functionality to achieve the above, but found that moving block can drag full screen, that if you want to just drag a draggable within the range
At this point we need to consider issues critical value. That is, the upper left and lower right corner. In mouse motion events, we increase the left and top value limit. I.e., when the coordinates of the lower right corner> left / top> left corner, as follows:
// 最小临界值 left = left <= wrapLeft ? wrapLeft.left : left top = top <= 150 ? 150 : top; // 最大临界值 left = left >= wrapLeftLast ? wrapLeftLast : left top = top >= (500 - 200 + 152) ? 452 : top;
Here, because I set up a center box, so using getBoundingClientRect (). Left get away from the box on the left side of the window. If the demand is not provided to the box, may be directly wrapLeft = 0, wrapLeftLast = (wrapper.width - box.width) instead.
Finally, we realize the above-said follow-up function. When dragging the mouse out of range wrapper, we stop dragging behavior. code show as below:
wrap.onmouseleave = function(e){ document.onmousemove = null }
Well, analytical thinking are finished, paste the complete code below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .wrapper{ width: 500px; height: 500px; margin: 150px auto; border: 1px solid #000; } .box{ position: absolute; width: 200px; height: 200px; background-color: red; cursor: move; } </style> </head> <body> <div class="wrapper"> <div class="box"></div> </div> <script> var oBox = document.getElementsByClassName('box')[0]， wrap = document.getElementsByClassName('wrapper')[0 ], wrapLeft = . Wrap.getBoundingClientRect () left, wrapLeftLast = wrapLeft + 302; // 302: Consider the problem of two border pixels oBox.addEventListener ( ' mouseDown ' , function (E) { var lastX = e.clientX , lastY = e.clientY; document.onmousemove = function (E) { var nowX = e.clientX, Nowy = e.clientY; var disX = nowX - lastX， disY = nowY - lastY； var left = oBox.offsetLeft + disX， top = oBox.offsetTop + disY； left = left <= wrapLeft ? wrapLeft.left : left； top = top <= 150 ? 150 : top； left = left >= wrapLeftLast ?wrapLeftLast: left; Top = Top > = ( 500 - 200 + 152 ) ? 452 : Top; // 452 considered the problem of two-pixel border oBox.style.left = left + ' PX '; oBox.style.top = Top + ' PX '; lastX = nowX; lastY = Nowy; } document.onmouseup = function () { document.onmousemove= null } }) wrap.onmouseleave = function(e){ document.onmousemove = null } </script> </body> </html>