原生实现拖动

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现拖拽位置预览</title>
    <style>
        .box {position: absolute;border: 1px dashed black;}
        #div1 {width: 100px;height: 100px;background: yellow;position: absolute;}
        #div2 {width: 100px;height: 100px;background: orange;position: absolute;}
    </style>
    
</head>

<body>
    <div id="div1"></div>
     <div id="div2"></div>
     
     <script>
         window.onload = function () {
     
            var oDiv = document.getElementById('div1');
             var oDiv02 = document.getElementById('div2');
            var oDivJH = document.querySelectorAll('div');
            console.log( oDivJH );
            
     
            oDiv.onmousedown = function (ev) {
     
                 var oEvent = ev || event;
                 var disX = oEvent.clientX - oDiv.offsetLeft;
                 var disY = oEvent.clientY - oDiv.offsetTop;
     
                 //创建一个虚线框的div
                 var oNewDiv = document.createElement('div');
     
                 oNewDiv.className = 'box';
                 //减去边框的大小与原div大小重合
                 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;
                     //移除虚线框
                     document.body.removeChild(oNewDiv);
                 };
             };
             
        
            oDiv02.onmousedown = function (ev) {
             
                 var oEvent = ev || event;
                 var disX = oEvent.clientX - oDiv02.offsetLeft;
                 var disY = oEvent.clientY - oDiv02.offsetTop;
             
                 //创建一个虚线框的div
                 var oNewDiv = document.createElement('div02');
             
                 oNewDiv.className = 'box';
                 //减去边框的大小与原 div大小重合
                 oNewDiv.style.width = oDiv02.offsetWidth - 2 + 'px';
                 oNewDiv.style.height = oDiv02.offsetHeight - 2 + 'px';
                 oNewDiv.style.left = oDiv02.offsetLeft + 'px';
                 oNewDiv.style.top = oDiv02.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;
                     oDiv02.style.left = oNewDiv.style.left;
                     oDiv02.style.top = oNewDiv.style.top;
                     //移除虚线框
                     document.body.removeChild(oNewDiv);
                 };
             };
      
         };
     </script
</body>

</html>