vue3全局自定义指令实现div在指定区域拖拽

最新推荐文章于 2025-06-21 07:02:03 发布

会飞的鱼—

最新推荐文章于 2025-06-21 07:02:03 发布

阅读量822

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/qq_47657875/article/details/131958099

该代码段定义了一个名为`drag`的Vue指令，用于实现元素拖拽功能。当鼠标按下时，计算元素相对于鼠标的偏移量，并在鼠标移动时更新元素的位置，同时确保元素不会超出屏幕边界。当鼠标释放时，移除事件监听器，恢复元素的指针事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const drag = {
  mounted(el, binding, vnode) {
    //传入的值，用来检测是否包括侧边栏的宽度
    let dragvalue = binding.value.dragvalue;
    el.onmousedown = function (e) {
      // let wtidthvalue = binding.value;
      let id = e.currentTarget.id;
       //计算鼠标位置相对于元素的偏移量
      let divx = e.clientX - document.getElementById(id).offsetLeft;
      let divy = e.clientY - document.getElementById(id).offsetTop;

      document.onmousemove = function (e) {
        el.style.pointerEvents = "none";
        //计算鼠标位置相对于元素新的偏移量
        let l = e.clientX - divx;
        let t = e.clientY - divy;
        // 检查拖拽位置是否超出屏幕边界
        const maxX = window.innerWidth - el.offsetWidth - dragvalue;
        const maxY = window.innerHeight - el.offsetHeight - 100;
        //限制最大最小范围
        l = Math.max(0, Math.min(l, maxX));
        t = Math.max(60, Math.min(t, maxY));

        document.getElementById(id).style.left = l + "px";
        document.getElementById(id).style.top = t + "px";
      };

      document.onmouseup = function (e) {
        el.style.pointerEvents = null;
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
};

export { drag };