js achieves simple drag and drop effects

This article example for everyone to share js to achieve a simple drag effect of the specific code, for your reference, the specific content is as follows

1. Basic effects of drag and drop

Thoughts:

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

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

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

var o = document.querySelector('div');
 
        // Mouse press 
        o.onmousedown = function (e) {
            // Position of mouse relative to box 
            var offsetX = e.clientX - o.offsetLeft;
            var offsetY = e.clientY - o.offsetTop;
            // Mouse movement 
            document.onmousemove = function (e) {
                o.style.left = e.clientX - offsetX + "px";
                o.style.top = e.clientY - offsetY + "px";
            }
            // Mouse up 
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }

2. The problem of dragging and dropping

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

Global capture

Global capture is only applicable to IE lower version browsers.

<button>btn1</button>
    <button>btn2</button>
    <script>
        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 
</script>

1 Once a global capture is added to the specified node, no other elements in the page will trigger events of the same type.

3. Drag and drop the full version

var o = document.querySelector('div');
 
        // Mouse press 
        o.onmousedown = function (e) {
            if (o.setCapture) {   //IE Low version 
                o.setCapture()
            }
            e = e || window.event
            // Position of mouse relative to box 
            var offsetX = e.clientX - o.offsetLeft;
            var offsetY = e.clientY - o.offsetTop;
            // Mouse movement 
            document.onmousemove = function (e) {
                e = e || window.event
                o.style.left = e.clientX - offsetX + "px";
                o.style.top = e.clientY - offsetY + "px";
            }
            // Mouse up 
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                if (o.releaseCapture) {
                    o.releaseCapture();// Release global capture    
                }
            }
            return false;// Default behavior of standard browsers 
        }