微信小程序 實現最簡單的組件拖拽

背景

最近在自主學習微信小程序的開發；對於零基礎入門(沒有學習過前端)的我，查閱了許多微信小程序拖拽的實現，大部分要么實現起來太復雜了，要么封裝組件太復雜了，附帶了拖拽之后排序等功能；因此寫下這篇個人覺得最好理解的 微信小程序元素拖拽的實現；

原理

這邊采用了 微信小程序中的 bindtouchstart、bindtouchmove、bindtouchend 三兄弟 實現 開始觸摸、觸摸后移動、觸摸結束；並加上一些坐標的轉換，實現簡單的 拖動功能；

第一步 touchStart

拖拽的開始 (一切盡在圖中)

控件的位置為 left:posX; top:posY;

通過bindtouchstart 得到首次的觸摸點坐標：touch.pageY;touch.pageX;

此時 可以得到 觸摸點和 控制的位置坐標差為

chaX = touch.pageX - posX;

chaY = touch.pageY - posY;

將這兩個值 暫存；用於拖動的后 位置的轉換；

第二步 toucMove

通過bindtouchmove 可以得到 觸摸移動的實時坐標：touch.pageY;touch.pageX;

然后通過剛剛得到chaX 和 chaY 可以轉換得到 實時移動的控件位置：

new_posX = touch.pageX - chaX;
new_posY = touch.pageY - chaY;

將這兩個值都更新至 控件的位置信息上；此時 可以實時渲染出 控件的移動；

第三步 touchEnd

通過bindtouchend 用於處理 拖拽動作的結束，清空臨時數據等；

代碼

WXML 代碼

• position: absolute; 絕對位置 用於left 和 top的使用
• left:{{posX}}px; 顯示的位置X
• top:{{posY}}px; 顯示的位置Y
• bindtouchstart="touchStart" 設置綁定的函數
• bindtouchmove="touchMove" 設置綁定的函數
• bindtouchend="touchEnd" 設置綁定的函數
• 其余元素只是為了控件展示

<view class="stick" style="position: absolute; text-align: center; width: 200rpx; height:50rpx;background: rgb(100, 180, 100);display: block;left:{{posX}}px;top:{{posY}}px" bindtouchmove="touchMove" bindtouchstart="touchStart" bindtouchend="touchEnd" >
        <view>AAAA</view>
    </view>

js代碼

Page({
    data: {
        chaX: 0,// 轉換值X
        chaY: 0,// 轉換值Y
        touch: false, // 觸摸標記
        posX:100, // 初始位置
        posY:20, // 初始位置
    },

    // 開始觸摸
    touchStart: function (e) {
        console.log("== touchStart ==");// 拖動開始
        // e.touches[0] 內容就是觸摸點的坐標值
        var tranX = e.touches[0].pageX-this.data.posX;
        var tranY = e.touches[0].pageY-this.data.posY;
        console.log("start tranX: " + tranX);
        console.log("start tranY: " + tranY);
        // 存儲chaX和chaY 並設置 touch: true
        this.setData({
            touch: true, 
            chaX:tranX,
            chaY:tranY
        });
    },
    // 觸摸移動
    touchMove: function (e) {
        if (!this.data.touch) return;
        // e.touches[0] 內容就是觸摸點的坐標值
        var new_posX = e.touches[0].pageX-this.data.chaX;
        var new_posY = e.touches[0].pageY-this.data.chaY;
        console.log(" move new_posX: " + new_posX);
        console.log(" move nwe_posY: " + new_posY);
        this.setData({
            posX: new_posX,
            posY: new_posY
        });
    },
    // 觸摸結束
    touchEnd: function (e) {
        console.log("== touchEnd ==")
        if (!this.data.touch) return;
        this.setData({
            touch: flase,
            chaX:0,
            chaY:0
        });
    }
})

參考資料

微信小程序 入門學習 資料收集