Vue实现拖拽指令

目录

• 前言
• 实现

前言

在web端开发的时候，需要在视图中显示多个元素覆盖在底元素之上，有时会遮挡一部分信息，所以想要在上面的元素可以通过拖拽移动位置。

实现

在vue项目中，我们实现拖拽简单的方式是通过指令来实现，这样需要用到拖拽的元素可以直接添加指令来集成很方面
代码如下：

Vue.directive('drag', {
  bind: function (el, binding) {

  },
  inserted:(el,binding)=>{
    document.body.appendChild(el);

    let dragBarId = binding.value.id;

    el.style.position='absolute';
    // el.style.margin="0px";
    let titleEl = $(el).find("#"+dragBarId);
    let titleH = titleEl.height();
    let titleW = binding.value.width;

    let docH = $(document).height();
    let docW = $(document).width();
    titleEl.mousedown((evt)=>{

      if(evt.button==0){
        //记录旧的鼠标样式
        let cursorStyle = titleEl.get(0).style.cursor;
        titleEl.get(0).style.cursor='move';
        let distanceX = evt.clientX - el.offsetLeft;
        let distanceY = evt.clientY - el.offsetTop;
        document.onmousemove = function(ev){
          let oevent = ev || event;
          let left = oevent.clientX - distanceX;

          if (left>docW-titleW){
            left = docW - titleW;
          }

          el.style.left = left + 'px';

          let top = oevent.clientY - distanceY;
          if(top<0){
            top=0;
          }
          if (top>docH-titleH){
            top = docH-titleH;
          }
          el.style.top = top + 'px';
        };
        document.onmouseup = function(evt){
          if (evt.button==0){
            //还原鼠标样式
            titleEl.get(0).style.cursor=cursorStyle;
            document.onmousemove = null;
            document.onmouseup = null;
          }
        };
      }
    });
  }
});

指令可以接收一个id，此ID的元素才监听拖拽方法，这样可以避免元素内部分子元素也需要监听拖拽或其它一些事件时冲突