javascript 实现简单的div拖动

最新推荐文章于 2025-01-31 09:00:41 发布

若水徒生

最新推荐文章于 2025-01-31 09:00:41 发布

阅读量432

点赞数

分类专栏： JSP

JSP 专栏收录该内容

7 篇文章

订阅专栏

本文分享了一段简单的JavaScript代码，用于实现网页中DIV元素的拖动功能。通过监听鼠标事件，可以方便地调整DIV的位置。

自己的js功底一向不好，所以一些简单的js功能也要到网上找，今天要做一个div拖动的功能，在网上找到一段很简单的代码，很简单，贴出来

<script>   
  var   ms;   
  function   did(obj){   
      ms=obj;   
      event.srcElement.setCapture();   
      x=document.all(ms).style.pixelLeft-event.x;   
      y=document.all(ms).style.pixelTop-event.y;   
  }   
    
  function   document.onmousemove(){   
      if(ms){   
          document.all(ms).style.pixelLeft=x+event.x;   
          document.all(ms).style.pixelTop=y+event.y;   
     }   
  }   
    
  function   document.onmouseup(){   
      if(ms){   
          event.srcElement.releaseCapture();   
          ms=0;   
      }   
  }   
  </script>   
  <div   id=a1   style=position:absolute>   
      <div   id=a2   onmousedown=did('a1')>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>   
      <div   id=a3>bbbbbbbbbbbbbbbbbbbbbbb</div>   
  </div>