vue拖动功能

一、拖动组件vuedraggable：

npm install vuedraggable 

<template>
  <vuedraggable class="wrapper" v-model="list">
    <transition-group>
      <div v-for="item in list" :key="item" class="item">
        <p>{{item}}</p>
      </div>
    </transition-group>
  </vuedraggable>
</template>

<script>
import vuedraggable from 'vuedraggable';
export default {
  name: 'HelloWorld',
  components: {vuedraggable},
  props: {
  },
  data() {
    return {
      list: [1,2,34,4,54,5]
    }
  },
  updated() {
    console.log(this.list)
  },
  methods: {

  }

}
</script>
<style scoped>
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.item{
  width: 300px;
  height: 50px;
  background-color: #42b983;
  color: #ffffff;
}
</style>

二、自定义拖动：

 <!--可拖动按钮-->
      <div class="btn" v-drag><el-button type="primary" icon="el-icon-edit"></el-button>
</div>

<script>
 created() {
   
  },
 
   //注册指令
  directives: {
    //拖动
    drag: function(el) {
      let dragBox = el;
      dragBox.onmousedown = e => {
        //算出鼠标相对元素的位置
        let disX = e.clientX - dragBox.offsetLeft;
        let disY = e.clientY - dragBox.offsetTop;
        document.onmousemove = e => {
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          // 限定左右边界
          if (left < 0) {
            left = 0;
          } else if (left > document.documentElement.clientWidth - dragBox.offsetWidth) {
            //   限定右边界
            left = document.documentElement.clientWidth - dragBox.offsetWidth;
          }
          //限定上下边界
          if (top < 0) {
            top = 0;
          } else if (top > document.documentElement.clientHeight - dragBox.offsetHeight) {
            //限定下边界;
            top = document.documentElement.clientHeight - dragBox.offsetHeight;
          }
          //移动当前元素
          dragBox.style.left = left + 'px';
          dragBox.style.top = top + 'px';
        };
        document.onmouseup = e => {
          //鼠标弹起来的时候不再移动
          document.onmousemove = null;
          //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
    }
  }
</script>
<style>
.btn {
      position: fixed;
      right: 20px;
      top: 30px;
    }
</style>

三、拖动时候阻止点击事件：根据鼠标down和up之间的时间来判断，时间较短的为点击：

 drag: function(el) {
      let dragBox = el;
      let firstTime = '',
        lastTime = '';
      dragBox.onmousedown = e => {
        document.getElementById('dragbtn').setAttribute('data-flag', false);
        firstTime = new Date().getTime();
        //鼠标相对元素的位置
        let disX = e.clientX - dragBox.offsetLeft;
        let disY = e.clientY - dragBox.offsetTop;
        document.onmousemove = e => {
          //鼠标的位置减去鼠标相对元素的位置 = 元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          // 限定左右边界
          if (left < 0) {
            left = 0;
          } else if (left > document.documentElement.clientWidth - dragBox.offsetWidth) {
            //   限定右边界
            left = document.documentElement.clientWidth - dragBox.offsetWidth;
          }
          //限定上下边界
          if (top < 0) {
            top = 0;
          } else if (top > document.documentElement.clientHeight - dragBox.offsetHeight) {
            //限定下边界;
            top = document.documentElement.clientHeight - dragBox.offsetHeight;
          }
          //移动当前元素
          dragBox.style.left = left + 'px';
          dragBox.style.top = top + 'px';
        };
        document.onmouseup = e => {
          //鼠标弹起来的时候不再移动
          document.onmousemove = null;
          //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
      dragBox.onmouseup = e => {
        document.onmousemove = null;
        document.onmouseup = null;
        // 差值
        lastTime = new Date().getTime();
        if (lastTime - firstTime < 200) {
          document.getElementById('dragbtn').setAttribute('data-flag', true);
        }
      };
    }

点击方法中加上判断：

 showModel() {
      let isClick = document.getElementById('dragbtn').getAttribute('data-flag');
      if (isClick !== 'true') {
        return false;
      }
      //单击事件
    },