原生JavaScript实现div拖拽效果

分手后的思念是犯贱 2022-05-24 03:43 365阅读 0赞

# 实现思路： #

（1）首先改变被拖动元素的布局属性为“position：absolute”，其父框为“position：relative”；

（2）捕捉鼠标事件“mousedown”、“mousemove”、“mouseup”；

（3）当触发“mousedown”时，记录下当前鼠标在元素中的相对位置，\_x，\_y；

（4）紧接着处理“mousemove”事件，通过改变元素的top和left属性来移动元素；

（5）当触发“mouse”事件时，终止拖动。

<!DOCTYPE html>  
    <html>  
      <head>  
        <title>原生js实现拖拽</title>  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">     
        <style type="text/css">
          #div1{ 
               width: 100px; height: 100px; 
               background-color: #4D4D4D; 
               position: absolute; cursor: pointer; 
               -webkit-box-shadow: 3px 3px 0px 3px #C7C7C7; 
               box-shadow: 3px 3px 3px 0px #C7C7C7; 
          }
          #parent{ 
            width: 500px; height: 500px; 
            border: 1px solid #CDCDCD; 
            position: relative; margin: 0 auto; 
            background-color: #F4F4F4; 
          }
          .postText{
            width: 500px; height: 30px;margin: 0 auto; background-color: #F4F4F4;
          }
          .postText span{ 
           padding:0px 10px;
          }
        </style>
        <script type="text/javascript">
          function posMove(getdivid) {
          var oDiv = document.getElementById(getdivid);
          var oParent = document.getElementById('parent');
          var sent = {
            l: 10, //设置div在父元素的活动范围，10相当于给父div设置padding-left：10;
            r: oParent.offsetWidth - oDiv.offsetWidth, // offsetWidth:当前对象的宽度， offsetWidth = width+padding+border
            t: 10,
            b: oParent.offsetHeight - oDiv.offsetHeight,
            n: 10
          }
          drag(oDiv, sent); 
        }
         
        /**
         *
         * @param obj:被拖动的div
         * @param sent :设置div在容器中可以被拖动的区域
         */
        function drag(obj,sent){
       
          var dmW = document.documentElement.clientWidth || document.body.clientWidth;
          var dmH = document.documentElement.clientHeight || document.body.clientHeight;
       
          var sent = sent || {};
          var l = sent.l || 0;
          var r = sent.r || dmW - obj.offsetWidth;
          var t = sent.t || 0;
          var b = sent.b || dmH - obj.offsetHeight;
          var n = sent.n || 10;
       
          obj.onmousedown = function (ev){
            var oEvent = ev || event;
            var sentX = oEvent.clientX - obj.offsetLeft;
            var sentY = oEvent.clientY - obj.offsetTop;
       
            document.onmousemove = function (ev){
              var oEvent = ev || event;
       
              var slideLeft = oEvent.clientX - sentX;
              var slideTop = oEvent.clientY - sentY;
       
              if(slideLeft <= l){
                slideLeft = l;
              }
              if(slideLeft >= r){
                slideLeft = r;
              }
              if(slideTop <= t){
                slideTop = t;
              }
              if(slideTop >= b){
                slideTop = b;
              }
       
              obj.style.left = slideLeft + 'px';
              obj.style.top = slideTop + 'px';
       
              document.getElementById('posTop').innerHTML = slideTop;
              document.getElementById('posLeft').innerHTML = slideLeft;
       
            };
            document.onmouseup = function (){
              document.onmousemove = null;
              document.onmouseup = null;
            }
       
            return false;
          }
      }  
      </script>
      </head>   
      <body>  
             <div id="parent">
                <div id="div1" οnmοusemοve="posMove(this.id)"></div>
             </div>
             <div class="postText">
                移动的距离Top：<span id="posTop"></span>Left:<span id="posLeft"></span>
             </div>
      </body>  
    </html>

# 效果如下： #

![20180519211519184][]

# 补充一点： #

js获取div相对于浏览器的x轴、y轴的数据：

1.  Firefox和其他浏览器使用event.pageX和event.pageY；
2.  IE使用event.clientX和event.clientY；

event对象是全局的，存储在window.event中。

[20180519211519184]: /images/20220524/1caea205e7e64d60ad982ecce1dd1255.png