基于vue的拖拽

拖拽的需求是这样的，在当前屏幕任意拖拽，不能超出。

• 拖拽的三个状态
  => 鼠标按下(mousedown || touchstart)
  => 鼠标在元素上(mousemove || touchmove)
  => 松开鼠标后(mouseup || end)

• 拖拽的思路

拖拽状态 = 0
鼠标在元素上按下的时候{      
    拖拽状态 = 1      
    记录下鼠标的x和y坐标      
    记录下元素的x和y坐标      
}   
 鼠标在元素上移动的时候{      
    如果拖拽状态是0就什么也不做。      
    如果拖拽状态是1，那么      
    当前元素x坐标 = 现在鼠标x - 原来鼠标x + 原来元素x      
    当前元素y坐标 = 现在鼠标y - 原来鼠标y + 原来元素y      
  }       
 鼠标在任何时候放开的时候{      
    拖拽状态 = 0      
}  

拖动效果图： 拖动.gif

代码：

//index.vue
     <div 
        class="pass-wrapper text-fz24 text-blue" 
        id="moveDiv"
        @mousedown="down" @touchstart="down"
        @mousemove="move" @touchmove="move"
        @mouseup="end" @touchend="end"
        @touchmove.prevent
      >
        <i class="lks-icon lks-icon_homepage text-fz50"></i>
        我的拼团
    </div>

export default {
    data() {
        return {
            flags: false,                           //拖拽状态
            position: {
                clientX: 0,                         //鼠标x坐标 
                clientY: 0,                         //鼠标y
                offsetX: '',                         //元素的x坐标
                offsetY: '',                         //元素的y坐标
                currentX: '',
                currentY: '',
            },
        }
    },
  
    methods: {
        // 鼠标按下去时
        down(e) {
            this.flags = true;
            let touch;
            if (e.touches) {
                touch = e.touches[0];
            } else {
                touch = e;
            }
            this.position.clientX = touch.clientX;
            this.position.clientY = touch.clientY;
            this.position.offsetX = moveDiv.offsetLeft;
            this.position.offsetY = moveDiv.offsetTop;
        },
        //鼠标在元素上时
        move() {
            //如果拖拽状态为true
            if (this.flags) {
                let touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                // 元素x = 现在鼠标x - 原来鼠标x + 原来元素x      
                // 元素y = 现在鼠标y - 原来鼠标y + 原来元素y      
                this.currentX = touch.clientX - this.position.clientX + this.position.offsetX
                this.currentY = touch.clientY - this.position.clientY + this.position.offsetY
                //限制宽
                if (this.currentX < 0) {
                    this.currentX = 0;
                } else if (this.currentX > window.innerWidth - moveDiv.offsetWidth) {
                    this.currentX = window.innerWidth - moveDiv.offsetWidth
                }
                //限制高
                if (this.currentY < 0) {
                    this.currentY = 0;
                } else if (this.currentY > window.innerHeight - moveDiv.offsetHeight) {
                    this.currentY = window.innerHeight - moveDiv.offsetHeight;
                }
                moveDiv.style.left = this.currentX + "px";
                moveDiv.style.top = this.currentY + "px";

            }
        },
        //鼠标释放时候的函数
        end() {
            this.flags = false;
        },
}

样式的话就不贴了,就是让他层级在最上边，位置自己定好就行～

---

文中有什么错误或者建议都可以提出哦～
路过的顺便点个赞吧;-）
欢迎加微信交流(记得写备注哦)
benny.png