Vue移动端实现拖拽+吸边处理

最新推荐文章于 2024-09-03 09:07:02 发布

水木Moira

最新推荐文章于 2024-09-03 09:07:02 发布

阅读量1.1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44524835/article/details/110957212

版权

在这里插入图片描述

<template>
    <div>
        <div ref="customerService"
             class="customer-service"
             @touchstart="touchstartHandle('customerService',$event)"
             @touchmove="touchmoveHandle('customerService',$event)"
             @touchend="end('customerService')"
             style="position:fixed">
        </div>
    </div>
</template>
<script>
export default {
    props: {

    },
    data () {
        return {
            touch: {
                initialPosition: {},
                movePostion: {}
            },
            element: {
                initialPosition: {},
                movePostion: {}
            },
            nowLeft: ''
        }
    },
    mounted () {

    },
    methods: {
        touchstartHandle (refName, e) {
            console.log(e)
            // 触摸开始
            let touchTarget = e.targetTouches[0];
            // 记录触摸点的坐标（初始位置）
            this.touch.initialPosition = {
                x: touchTarget.clientX,
                y: touchTarget.clientY
            }
            // 记录需要移动的元素坐标（初始位置）
            this.element.initialPosition = {
                x: this.$refs[refName].offsetLeft,
                y: this.$refs[refName].offsetTop
            }
        },
        touchmoveHandle (refName, e) {
            e.preventDefault();
            let touchTarget = e.targetTouches[0];
            // 根据初始touch位置计算移动距离:元素移动位置=元素初始位置+(光标移动后的位置-光标点击时的初始位置)
            let X = this.element.initialPosition.x + (touchTarget.clientX - this.touch.initialPosition.x);
            let Y = this.element.initialPosition.y + (touchTarget.clientY - this.touch.initialPosition.y);
            // 限制可移动距离，不超出可视区域
            let maxWidth = innerWidth - this.$refs[refName].offsetWidth;
            let maxHeight = innerHeight - this.$refs[refName].offsetHeight;
            
            X = X <= 0 ? 0 : X >= maxWidth ? maxWidth : X;
            Y = Y <= 0 ? 0 : Y >= maxHeight ? maxHeight : Y;
            console.log(X,Y)
			this.nowLeft = X;
            // 移动元素
            this.$refs[refName].style.left = X + 'px'
            this.$refs[refName].style.top = Y + 'px'
        },
        end (refName) {
            // 吸边处理
            let halfMaxWidth = (innerWidth - this.$refs[refName].offsetWidth) / 2;
            const dragDiv = this.$refs[refName];
            if (this.nowLeft> halfMaxWidth) {
                //   右吸边
                dragDiv.style.left =
                    document.documentElement.clientWidth -
                    parseInt(dragDiv.clientWidth) +
                    'px';
            }
            else {
                // 左吸边
                dragDiv.style.left = "0px";
            }
            dragDiv.style.top = dragDiv.offsetTop + 'px';
        }
    }
}
</script>
<style scoped lang="scss">
.customer-service {
    background-image: url("../assets/strawberry.jpg");
    background-size: contain;
    border: 2px dotted #f5a7a7;
    height: 100px;
    width: 100px;
    background-repeat: no-repeat;
}
</style>