Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to achieve simple drag and drop effect in js". The content is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to achieve simple drag effect in js".

1. The basic effect of dragging

Train of thought:

When the mouse is pressed over the box, it is ready to move (events are added to the object)

As the mouse moves, the box follows the mouse (events are added to the page)

When the mouse is raised, the box stops moving (events are added to the page)

Var o = document.querySelector ('div'); / / Mouse press o.onmousedown = function (e) {/ / Mouse position relative to the box var offsetX = e.clientX-o.offsetLeft; var offsetY = e.clientY-o.offsetTop / / Mouse move _ document.onmousemove = function (e) {o.style.left = e.clientX-offsetX + "px"; o.style.top = e.clientY-offsetY + "px";} / / Mouse lift _ document.onmouseup = function () {_ document.onmousemove = null _ document.onmouseup = null;}} 2. The problem of dragging

If text appears in the box, or the box itself is a picture, due to the default behavior of the browser (the text and the picture themselves can be dragged), we can set return false to prevent its default behavior, but this blocking default behavior is not applicable in the lower version of IE, so we can use global capture to solve the IE problem.

Global capture

Global capture applies only to IE lower-version browsers.

Btn1 btn2 var bts = document.querySelectorAll ('button') bts [0] .onclick = function () {console.log (1);} bts [1] .onclick = function () {console.log (2);} / bts [0] .setCapture () / add global capture / / bts [0] .releaseCapture () / / release global capture

Once a global capture is added to the specified node, other elements on the page do not trigger events of the same type.

3. Full version of drag and drop var o = document.querySelector ('div') / / Mouse Down o.onmousedown = function (e) {if (o.setCapture) {/ / IE Lower version o.setCapture ()} e = e | window.event / / Mouse position relative to the box var offsetX = e.clientX-o.offsetLeft; var offsetY = e.clientY-o.offsetTop / / Mouse document.onmousemove = function (e) {e = e | | window.event o.style.left = e.clientX-offsetX + "px"; o.style.top = e.clientY-offsetY + "px" } / / Mouse lift _ document.onmouseup = function () {_ document.onmousemove = null; _ document.onmouseup = null; if (o.releaseCapture) {o.releaseCapture (); / / release global capture}} return false / / the default behavior of standard browsers} the above is all the content of the article "how to achieve simple drag-and-drop effects in js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.