vue拖动功能

约定不等于承诺〃 2023-03-05 15:58 24阅读 0赞

一、拖动组件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;
          }
          //单击事件
        },