<view class='outer' >
? <view class='inner'>
? ? <movable-area>
? ? ? <block wx:for="{{data}}">
? ? ? ? <view class='item' ?id="{{item.index}}" data-index='{{index}}' bindlongpress='_longtap' bindtouchstart='touchs' bindtouchend='touchend' bindtouchmove='touchm'>
? ? ? ? ? <text>{{item.index}}</text>
? ? ? ? </view>
? ? ? </block>
? ? ? <movable-view x="{{x}}" y="{{y}}" direction="all" damping="{{5000}}" friction="{{1}}" disabled="{{disabled}}">
? ? ? ? <view class='item-move' hidden='{{hidden}}'>
? ? ? ? </view>
? ? ? </movable-view>
? ? </movable-area>
? </view>
</view>

// test/test.js
Page({

? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? hidden:true,
? ? flag:false,
? ? x:0,
? ? y:0,
? ? data:[{index:1},
? ? ? { index: 2 },
? ? ? { index: 3 },
? ? ? { index: 4 },
? ? ? { index: 5 },
? ? ? { index: 6 },
? ? ? { index: 7 },
? ? ],
? ? disabled: true,
? ? elements:[]
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function (options) {
? ??
? ? ? var query = wx.createSelectorQuery();
? ? ? var nodesRef = query.selectAll(".item");
? ? ? nodesRef.fields({
? ? ? dataset: true,
? ? ? rect:true
? ? ??
? ? },(result)=>{
? ? ? ? this.setData({
? ? ? ? ? elements: result
? ? ? ? })
? ? ? ? }).exec()
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
? ?*/
? onReady: function () {
??
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ?*/
? onShow: function () {
??
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
? ?*/
? onHide: function () {
??
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
? ?*/
? onUnload: function () {
??
? },

? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function () {
??
? },

? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
??
? },

? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function () {
??
? },


? //長(zhǎng)按
? _longtap:function(e){
? ? const detail = e.detail;
? ? this.setData({
? ? ? x: e.currentTarget.offsetLeft,
? ? ? y: e.currentTarget.offsetTop
? ? })
? ? this.setData({
? ? ? hidden: false,
? ? ? flag:true
? ? })

? },
? //觸摸開(kāi)始
? touchs:function(e){
? ? this.setData({
? ? ? beginIndex:e.currentTarget.dataset.index
? ? })
? },
? //觸摸結(jié)束
? touchend:function(e){
? ? if (!this.data.flag) {
? ? ? return;
? ? }
? ? const x = e.changedTouches[0].pageX
? ? const y = e.changedTouches[0].pageY
? ? const list = this.data.elements;
? ? let data = this.data.data
? ? for(var j = 0; j<list.length; j++){
? ? ? const item = list[j];
? ? ? if(x>item.left && x<item.right && y>item.top && y<item.bottom){
? ? ? ? const endIndex = item.dataset.index;
? ? ? ? const beginIndex = this.data.beginIndex;
? ? ? ? //向后移動(dòng)
? ? ? ? if (beginIndex < endIndex) {
? ? ? ? ? let tem = data[beginIndex];
? ? ? ? ? for (let i = beginIndex; i < endIndex; i++) {
? ? ? ? ? ? data[i] = data[i + 1]
? ? ? ? ? }
? ? ? ? ? data[endIndex] = tem;
? ? ? ? }
? ? ? ? //向前移動(dòng)
? ? ? ? if (beginIndex > endIndex) {
? ? ? ? ? let tem = data[beginIndex];
? ? ? ? ? for (let i = beginIndex; i > endIndex; i--) {
? ? ? ? ? ? data[i] = data[i - 1]
? ? ? ? ? }
? ? ? ? ? data[endIndex] = tem;
? ? ? ? }

? ? ? ? this.setData({
? ? ? ? ? data: data
? ? ? ? })
? ? ? }
? ? }
? ? this.setData({
? ? ? hidden: true,
? ? ? flag: false
? ? })
? },
? //滑動(dòng)
? touchm:function(e){
? ? if(this.data.flag){
? ? ? const x = e.touches[0].pageX
? ? ? const y = e.touches[0].pageY
? ? ? this.setData({
? ? ? ? x: x - 75,
? ? ? ? y: y - 45
? ? ? })
? ? }
? }
})

/* test/test.wxss */
.outer{
? width: 650rpx;
? height: 400rpx;
? border: 1px solid red;
? margin: 0 auto;
}
.inner{
? width: 100%;
? height: 100%;
}
movable-area{
? width: 100%;
? height: 100%;
}
.item{
? display: inline-block;
? width: 150rpx;
? height: 150rpx;
? border: 1px solid red;
? text-align: center;
? line-height: 150rpx;
}

.index-first{
? display: inline-block;
? width: 15rpx;
? height: 150rpx;
? background: firebrick;
}

.item-move{
? display: inline-block;
? width: 150rpx;
? height: 150rpx;
? border: 1px solid blue;
}