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

最新推荐文章于 2024-06-08 08:31:38 发布

会飞的鱼—

最新推荐文章于 2024-06-08 08:31:38 发布

阅读量651

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_47657875/article/details/131958099

版权

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 };