更新记录

1.0.0（2024-12-02） 下载此版本

1.0.0（2024-12-02）

第一版

平台兼容性

drag-wxs

本库使用纯wxs实现的拖拽，给需要被拖拽的元素添加touchstart，touchmove，touchend方法即可

和 movable-area 相比无代码侵入，性能优异

使用方法

不要直接导入工程！点下载示例项目ZIP！

请直接把压缩包里的drag.wxs复制到自己的项目中

示例

<template>
    <view>
        <view
            class="webarcx-intro drag"
            :data-windowHeight="windowHeight"
            :data-centerX="centerX"
            @touchstart="drag.touchstart"
            @touchmove="drag.touchmove"
            @touchend="drag.touchend"
            :style="left && top ? 'left:' + left + 'px;top:' + top + 'px' : ''"
        >
            <image v-if="showFloatIdx == 1" class="webarcx-intro-btn" src="/yipinmao/user_index/i_webarcx_intro_v2.png" mode="scaleToFill" @tap="toDetail" />

        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                 windowHeight: 0,
                 left: null,
                 top: null,
                 centerX: 0 // 屏幕中点X坐标
            }
        },
        mounted() {
            const XY = uni.getStorageSync('float_btn_webarcx_intro_xy');
            uni.getSystemInfo({
                success(res) {
                    that.setData({
                        centerX: res.windowWidth / 2,
                        windowHeight: res.windowHeight
                    });
                }
            });
            this.setData({
                left: XY.x || null,
                top: XY.y || null
            });
        },
        methods: {
             setStorage(e) {
                uni.setStorageSync('float_btn_webarcx_intro_xy', e.XY);
            }
        }

    }
</script>
<script module="drag" lang="wxs" src="@/wxs/drag.wxs"></script>

<style lang="less">
.webarcx-intro {
    position: fixed;
    width: 160rpx;
    height: 188rpx;
    right: 15rpx;
    bottom: 350rpx;
    z-index: 9;
    transition: right 0.5s;

    .webarcx-intro-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 40rpx;
        height: 40rpx;
    }

    .webarcx-intro-btn {
        width: 160rpx;
        height: 161rpx;
        position: absolute;
        left: 0;
        bottom: 0;
    }
}
</style>

注意

1.仅在微信小程序和app测试，其他环境需自行测试。

2.被拖拽的元素一定要被一个父元素包裹

错误：

<template>
    <view
          v-if="visible"
          class="webarcx-intro drag"
          :data-windowHeight="windowHeight"
          :data-centerX="centerX"
          @touchstart="drag.touchstart"
          @touchmove="drag.touchmove"
          @touchend="drag.touchend"
          :style="left && top ? 'left:' + left + 'px;top:' + top + 'px' : ''"
          >
        <image v-if="showFloatIdx == 1" class="webarcx-intro-btn" src="/yipinmao/user_index/i_webarcx_intro_v2.png" mode="scaleToFill" @tap="toDetail" />
        </view>
</template>

正确：

<template>
    <view>
        <view
            v-if="visible"
            class="webarcx-intro drag"
            :data-windowHeight="windowHeight"
            :data-centerX="centerX"
            @touchstart="drag.touchstart"
            @touchmove="drag.touchmove"
            @touchend="drag.touchend"
            :style="left && top ? 'left:' + left + 'px;top:' + top + 'px' : ''"
        >
            <image v-if="showFloatIdx == 1" class="webarcx-intro-btn" src="/yipinmao/user_index/i_webarcx_intro_v2.png" mode="scaleToFill" @tap="toDetail" />
        </view>
    </view>
</template>