小程序拖动排序

出自 https://zhuanlan.zhihu.com/p/59762438](https://zhuanlan.zhihu.com/p/59762438

<view class="sort">

<view class="imageLi {{index==current?'moving':'normal'}}" wx:for="{{imageList}}" data-index="{{index}}" wx:key="{{index}}" bindtouchmove="move" bindtouchstart="movestart" bindtouchend="moveend" style="left:{{index==current?move_x * 2:item.left*2}}rpxtop:{{index==current?move_y:item.top}}px">

<image data-index="{{index}}" src="{{item.src}}" />

</view>

</view>

/* pages/sort/sort.wxss */空信

.sort{

padding:60rpx 60rpx

position:relative

}

.imageLi{

width:120rpx

height:160rpx

display: inline-block

position:absolute

z-index: 99

}

.imageLi image{

width:100%

height:100%

}

.imageLi:nth-child(4n){

margin-right:0

}

// pages/友亏核sort/sort.js

var x, y, x1, y1, x2, y2

Page({

/**

/**

//添加信息

changeMove: function (array) {

const self = this

var width = self.data.all_width, _w = 0, row = 0, column = 0

var arr = [].concat(array)

arr.forEach(function (n, i) {

n.left = (self.data.u_w + self.data.s_h) * row + self.data.s_h

n.top = (self.data.u_h + self.data.s_v) * column + self.data.s_v

n._left = n.left

n._top = n.top

_w += self.data.u_w + self.data.s_h

if (_w + self.data.u_w + self.data.s_h >width) {

_w = 0

row = 0

column++

} else {

row++

}

})

console.log(arr)

return arr

},

movestart: function (e) {

x = e.touches[0].clientX

y = e.touches[0].clientY

x1 = e.currentTarget.offsetLeft

y1 = e.currentTarget.offsetTop

this.setData({

current: e.currentTarget.dataset.index,

move_x: x1,

move_y: y1

})

},

move: function (e) {

var self = this

// // console.log('move',e.target.dataset.current)

x2 = e.touches[0].clientX - x + x1

y2 = e.touches[0].clientY - y + y1

// // this.setData({

// // current: currindex,

// //好掘 start: { x: x2, y: y2 }

// // })

var underIndex = self.getCurrnetUnderIndex()

},

moveend: function (e) {

const that = this

that.setData({

current: -1,

})

},

changeArrayData: function (arr, i1, i2) {

var temp = arr[i1]

arr[i1] = arr[i2]

arr[i2] = temp

},

getCurrnetUnderIndex: function (endx, endy) {//获取当前移动下方index

var endx = x2 + this.data.u_w / 2,

endy = y2 + this.data.u_h / 2

var v_judge = false, h_judge = false, column_num = (this.data.all_width - this.data.s_h) / (this.data.s_h + this.data.u_w) >>0

// console.log(endx,endy)

var _column = (endy - this.data.s_v) / (this.data.u_h + this.data.s_v) >>0

var min_top = this.data.s_v + (_column) * (this.data.u_h + this.data.s_v),

max_top = min_top + this.data.u_h

// console.log('v', _column, endy, min_top, max_top)

if (endy >min_top &&endy <max_top) {

v_judge = true

}

var _row = (endx - this.data.s_h) / (this.data.u_w + this.data.s_h) >>0

var min_left = this.data.s_h + (_row) * (this.data.u_w + this.data.s_h),

max_left = min_left + this.data.u_w

// console.log('x', _row, endx, min_left, max_left)

if (endx >min_left &&endx <max_left) {

h_judge = true

}

if (v_judge &&h_judge) {

var index = _column * column_num + _row

if (index >this.data.imageList.length - 1) {//超过了

return null

} else {

return index

}

} else {

return null

}

},

/**

},

/**

view标签 加 bindtap事让笑咐件，用data-name传值，如果view中只有文字，点击整个view区域都可以接收到data-name的值，如果view里面加一个lable标签，那么点击lable包裹的区域，data-name取不到值。坦纯升悉

解决方法：把取值方式 由e.target.dataset.carrierName 修改为e.currentTarget.dataset.carrierName即可！

---