封装一个可拖动元素,并优化click事件

发布于 2024-04-10  298 次阅读


mousemove拖动事件触发click事件

制作一个可以拖动的元素,如果给这个元素同时添加点击事件的话。拖动后会触发点击事件。要想将点击事件和拖动事件扯开关系。

实现原理,在mousedown或者touchstart的时候记录这个元素的

clientX和clientY,并记录下来

在@mouseup和或者@touchend拖动结束的时候,判断现在的x与y是否更变了,如果没有发送了变化则相当于触发了click事件

    <view class="rebackUni" v-bind:style="{ top: abtnTop + 'px', left: abtnLeft + 'px' }" @mousedown="startDragPc"
            @mousemove="draggingFnPc" @mouseup="endDragPc" @touchstart="startDrag" @touchmove="draggingFn"
            @touchcancel="endDrag" @touchend="endDrag">

            <image src="../../static/AndroidProp.png" mode=""></image>
        </view> 
clicking: false,
                dragging: false,
                abtnTop: 0,
                abtnLeft: 60,
                abtnStartX: 0,
                abtnStartY: 0,
                recordX:0,
                recordY:0

        startDragPc(event) {
                this.dragging = true;
                this.recordX = event.clientX;
                this.recordy = event.clientY;
                this.abtnStartX = event.clientX - this.abtnLeft;
                this.abtnStartY = event.clientY - this.abtnTop;
            },
            startDrag(event) {
                var curTouch = event.touches[0];
                this.dragging = true;
                this.recordX = curTouch.clientX;
                this.recordy = curTouch.clientY;
                this.abtnStartX = curTouch.clientX - this.abtnLeft;
                this.abtnStartY = curTouch.clientY - this.abtnTop;
            },
            draggingFnPc(event) {
                if (this.dragging) {
                    this.abtnLeft = event.clientX - this.abtnStartX;
                    this.abtnTop = event.clientY - this.abtnStartY;
                }
            },
            draggingFn(event) {
                      var curTouch = event.touches[0];
                if (this.dragging) {
                    this.abtnLeft = curTouch.clientX - this.abtnStartX;
                    this.abtnTop = curTouch.clientY - this.abtnStartY;
                }
            },

            endDragPc(event) {

                this.dragging = false;
                this.clicking = false;
                //视为触发click事件
                if(this.recordX == event.clientX){
                    this.appShow = false;
                }
            },
            endDrag(event) {
            var curTouch = event.touches[0];
                this.dragging = false;
                this.clicking = false;
                //视为触发click事件
                if(this.recordX == curTouch.clientX){
                    this.appShow = false;
                }
            },

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。