小程序实现拖拽功能

<view class='collectBox' 
    bindtap='addCollect' 
    wx:if="{{write[0]+write[1] > 0}}" 
    bindtouchmove="touchmove" 
    catch:touchmove 
    style="left:{{write[0]}}px;top:{{write[1]}}px;">
    <image src='../../images/icon/addcollect.png'></image>
</view>

 

// pages/cateDetaile/cateDetaile.js
const app = getApp()
Page({
 
    /**
     * 页面的初始数据
     */
    data: {
        // 拖拽参数
        writePosition: [80, 90], //默认定位参数
        writesize: [0, 0],// X Y 定位
        window: [0, 0], //屏幕尺寸
        write: [0, 0], //定位参数
        scrolltop: 0,//据顶部距离
    },
 
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 在页面中定义插屏广告
        let that = this;
        that.getSysdata();
    },
    //计算默认定位值
    getSysdata: function () {
        var that = this;
        wx.getSystemInfo({
            success: function (e) {
                that.data.window = [e.windowWidth, e.windowHeight];
                var write = [];
                write[0] = that.data.window[0] * that.data.writePosition[0] / 100;
                write[1] = that.data.window[1] * that.data.writePosition[1] / 100;
                console.log(write,45)
                that.setData({
                    write: write
                }, function () {
                    // 获取元素宽高
                    wx.createSelectorQuery().select('.collectBox').boundingClientRect(function (res) {
                        console.log(res.width)
                        that.data.writesize = [res.width, res.height];
                    }).exec();
                })
            },
            fail: function (e) {
                console.log(e)
            }
        });
    },
    //开始拖拽   
    touchmove: function (e) {
        var that = this;
        var position = [e.touches[0].pageX - that.data.writesize[0] / 2, e.touches[0].pageY - that.data.writesize[1] / 2 - this.data.scrolltop];
        that.setData({
            write: position
        });
    },
    onPageScroll(e) {
        this.data.scrolltop = e.scrollTop;
    },
})

喜欢上方小程序,需要源码的,私信小编留下邮箱。
————————————————
版权声明：本文为CSDN博主「前端_李嘉豪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42460570/article/details/101203564