How to achieve simple drag-and-drop effect with JavaScript

This article mainly explains "how to achieve simple drag and drop effect in JavaScript". Friends who are interested may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve simple drag and drop effect with JavaScript".

This article gives you an example to share the specific code of JavaScript to achieve a simple drag-and-drop effect for your reference, the details are as follows

First, let's take a look at the results:

Idea: it uses three events, mouse press, move, release event

So first create the box and give it a css style

HTML:

/ / html

I'm a blue box.

CSS:

CSS* {margin: 0 height padding: 0;} div {width: 100px; height: 100px; background-color: cornflowerblue; position: absolute;} p {width: 100px; height: 100px; line-height: 100px; font-size: 10px; color: # fff Text-align: center; transition: .5s all;} p:hover {transform: translateY (- 5px); transition: .5s all; box-shadow: 10px 10px 5px gray;}

Then set the corresponding method in JS

Var div = document.querySelector ('div'); var p = document.querySelector (' p'); / / define initialization variables x, y var x = 0; var y = 0; / / var I = 3; text in var TorF= false; / / box cannot be selected div.onselectstart = function (e) {return false } div.addEventListener ('mousedown',function (e) {/ / client: output mouse pointer coordinates x = e.clientX; y = e.clientY; / / format: obj.offsetLeft: get the left and upper offset / / specifically stated here: this property is read-only and cannot be assigned. / / returns the distance of the current element to the left of the parent element (body) / / instead of declaring a global variable, the ldepartment t here creates a property of the global object. L = div.offsetLeft; t = div.offsetTop; / / Mouse settings move arrow div.style.cursor = 'move'; p [XSS _ clean] =' I was pressed ^ _ ^'; TorF= true;}) / / document.addEventListener ('mousemove',function (e) {/ / if false terminates the execution of the function and returns the value of the function if (Torf = = false) {return;} / / define the local variable var twox = e.clientX in this function Var twoy = e.clientY; / / the coordinates of the mouse pointer obtained-(coordinates of the mouse pointer-offset) = the actual position of the mouse drag / / must be followed by a px unit, because the acquisition itself is var twol = twox-(XMul); var twot = twoy-(yMut) Div.style.left = twol+'px'; div.style.top = twot+'px'; p [XSS _ clean] ='I'm being dragged -. -';}); div.addEventListener ('mouseup',function () {/ / stop mouse movement event TorF= false when you release the keyboard / / Mouse restore default style div.style.cursor = 'default'; p [XSS _ clean] =' I was popped open QAQ';})

Note:

1. If you want to control the position of a box, you must add a position to the box, otherwise the box will not move

2. The attribute offsetLeft is read-only and cannot be assigned.

3. Calculation of mouse position: coordinate of mouse pointer-(coordinate of mouse pointer-offset) = actual position of mouse drag

At this point, I believe you have a deeper understanding of "how to achieve simple drag and drop effect in JavaScript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!