JS 实现 DIV 可拖拽

最新推荐文章于 2025-01-15 07:56:15 发布

原创最新推荐文章于 2025-01-15 07:56:15 发布 · 249 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#div拖拽 #js

js插件专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现元素拖拽功能的方法。通过监听mousedown、mousemove和mouseup事件，可以轻松地使页面上的任意元素变得可拖动，适用于创建自定义布局或交互式UI组件。

/* 可拖拽 */
 var dragBox = function (drag, wrap) {

      function getCss(ele, prop) {
           return parseInt(window.getComputedStyle(ele)[prop]);
      }

      var initX,
          initY,
          dragable = false,
          wrapLeft = getCss(wrap, "left"),
          wrapRight = getCss(wrap, "top");

      drag.addEventListener("mousedown", function (e) {
      	// console.log(e)
           dragable = true;
           initX = e.clientX;
           initY = e.clientY;
      }, false); 

     document.addEventListener("mousemove", function (e) {
           if (dragable === true ) {
               var nowX = e.clientX,
                   nowY = e.clientY,
                   disX = nowX - initX,
                   disY = nowY - initY;
               wrap.style.left = wrapLeft + disX + "px";
               wrap.style.top = wrapRight + disY + "px";
           }
      });

      drag.addEventListener("mouseup", function (e) {
           dragable = false;
           wrapLeft = getCss(wrap, "left");
           wrapRight = getCss(wrap, "top");
      }, false); 

   };