How to realize drag-and-drop function with js

What I brought to you this time is how to use js to realize the drag and drop function. What are the precautions to realize drag and drop function with js? The following is an actual case. Let's have a look.

If you want to set an object drag, you must use three events, and the order of these three events cannot be reversed.

1.onmousedown: mouse down event

2.onmousemove: mouse movement event

3.onmouseup: mouse up event

The basic principle of dragging is to move the dragged element according to the movement of the mouse. The movement of the mouse is also the change of x and y coordinates; The movement of elements is the change of style.position, up, down, left and right. Of course, it is not necessary to move the mouse at any time, but to judge whether the left mouse button is pressed or not on a draggable element.

The basic idea is as follows:

When the mouse is pressed on the element {

Drag status = 1

Record the x and y coordinates of the mouse.

Record the x and y coordinates of the element.

}

When the mouse moves over an element {

If the drag state is 0, do nothing.

If the drag status is 1

Element y = current mouse y- original mouse y+ original element y

Element x = current mouse x- original mouse x+ original element x

}

Whenever you release the mouse {

Drag state = 0

} part of the sample code:

HTML section

& ltp class="calculator" id="drag " >* * * * * * * * * & lt/p & gt； CSS part

Calculator {

Location: absolute; /* Set the absolute positioning, which is separated from the document flow and convenient to drag and drop */

Display: block;

Width: 218px;

Height: 280px

Cursor: moving; /* The mouse is dragged */

}JS part

window.onload = function() {

//Drag function (mainly triggering three events: onmousedown \ onmousemove \ onmouseup)

var drag = document . getelementbyid(' drag ')；

//When clicking an object, just drag the object. Move and up are global areas, that is, the whole document is universal. You should use the document object instead of the drag object (otherwise, you can only move the object to the right or down when using the drag object).

drag.onmousedown = function(e) {

Var e = e || window.event// compatible ie browser.

var diffX = e . clientx-drag . offset left； //The distance from the left boundary of the object at the moment when the mouse clicks = the distance from the clicked position to the top left corner of the browser-the distance from the left boundary of the object to the top left corner of the browser.

var diffY = e . clienty-drag . offsettop；

/* Earlier version of ie bug: When an object is dragged out of the browser but out of the window, a scroll bar will appear.

The solution is to adopt two methods unique to ie browser, setcapture () \ releasedcapture (),

You can slide the mouse outside the browser to capture events. Our bug is that when the mouse moves out of the browser,

Functions exceeding the limit will be invalid. This problem can be solved in this way. Note: these two methods are used in onmousedown and onmouseup */

if(typeof drag.setCapture！ =' undefined') {

drag . set capture()；

}

document . onmousemove = function(e){

Var e = e || window.event// compatible ie browser.

var left = e . clientx-diffX；

var top=e.clientY-diffY。

//Only control the scope of dragging objects in the browser window, and scroll bars are not allowed.

if(left & lt； 0){

Left = 0;

} else if(left & gt； window . inner width-drag . offsetwidth){

left = window . inner width-drag . offsetwidth；

}

if(top & lt； 0){

top = 0；

} else if(top & gt； window . inner height-drag . offset height){

top = window . inner height-drag . offset height；

}

//Get the distance when the object moves again, and solve the phenomenon of shaking when dragging.

drag . style . left = left+' px '；

drag . style . top = top+' px '；

};

Documents. Onmouseup = function(e){// Stop moving when the mouse pops up.

this.onmousemove = null

This.onmouseup = null// Prevents the mouse from cycling after bouncing (that is, prevents the mouse from moving when it is put up).

//Fix the lower version of ie bug

if(typeof drag.releaseCapture！ =' undefined') {

drag . release capture()；

}

};

};

}; I believe you have mastered the method after reading this case. For more exciting, please pay attention to other related articles on Gxl!

Recommended reading:

Vue does SMS verification code registration function.

How to use Angular to connect components online