Native JS to implement drag position preview

This article shares with you a small Demo that adds a preview when dragging an element. The effect is as follows:

The following is the code implementation, everyone is welcome to copy, paste and comment.

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Native JS to implement drag position preview</title>
    <style>
        .box {
            position: absolute;
            border: 1px dashed black;
        }
 
        #div1 {
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
 
            var oDiv = document.getElementById('div1');
 
            oDiv.onmousedown = function (ev) {
 
                var oEvent = ev || event;
                var disX = oEvent.clientX - oDiv.offsetLeft;
                var disY = oEvent.clientY - oDiv.offsetTop;
 
                //Create a div with a dotted frame
                var oNewDiv = document.createElement('div');
 
                oNewDiv.className = 'box';
                // Subtract the border size to coincide with the original div size oNewDiv.style.width = oDiv.offsetWidth - 2 + 'px';
                oNewDiv.style.height = oDiv.offsetHeight - 2 + 'px';
                oNewDiv.style.left = oDiv.offsetLeft + 'px';
                oNewDiv.style.top = oDiv.offsetTop + 'px';
 
                document.body.appendChild(oNewDiv);
 
                document.onmousemove = function (ev) {
 
                    var oEvent = ev || event;
 
                    oNewDiv.style.left = oEvent.clientX - disX + 'px';
                    oNewDiv.style.top = oEvent.clientY - disY + 'px';
                };
 
                document.onmouseup = function () {
 
                    document.onmousemove = null;
                    document.onmouseup = null;
 
                    oDiv.style.left = oNewDiv.style.left;
                    oDiv.style.top = oNewDiv.style.top;
                    //Remove the dotted box document.body.removeChild(oNewDiv);
                };
            };
        };
    </script>
</head>
 
<body>
    <div id="div1"></div>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS HTML5 drag and drop upload image preview
JS implements three methods of uploading pictures and realizing the preview picture function
js to realize image upload and preview function
js method to realize the preview of uploaded pictures
JS preview image displays local images on the browser
js to upload pictures and preview them before uploading
Javascript local preview example before uploading image
js image preview function before uploading (compatible with all browsers)
Easily implement js image preview function
Analysis of the principle of picture upload preview using js

<<: Implementation of docker view container log command

>>: HTML table tag tutorial (19): row tag