// 判断是否出界
|
var isOutRange = function(x1, y1, x2, y2, x3, y3) {
|
return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3
|
}
|
var edit = false
|
|
function bool(str) {
|
return str === 'true' || str === true
|
}
|
/**
|
* 排序核心
|
* @param {Object} startKey 开始时位置
|
* @param {Object} endKey 结束时位置
|
* @param {Object} instance wxs内的局部变量快照
|
*/
|
var sortCore = function(startKey, endKey, state) {
|
var basedata = state.basedata
|
var excludeFix = function(sortKey, type) {
|
// fixed 元素位置不会变化, 这里直接用 sortKey 获取，更加便捷
|
if (state.list[sortKey].fixed) {
|
var _sortKey = type ? --sortKey : ++sortKey
|
return excludeFix(sortKey, type)
|
}
|
return sortKey
|
}
|
|
// 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改
|
var endRealKey = -1
|
state.list.forEach(function(item) {
|
if (item.sortKey === endKey) endRealKey = item.realKey
|
})
|
|
return state.list.map(function(item) {
|
if (item.fixed) return item
|
var sortKey = item.sortKey
|
var realKey = item.realKey
|
|
if (startKey < endKey) {
|
// 正序拖动
|
if (sortKey > startKey && sortKey <= endKey) {
|
--realKey
|
sortKey = excludeFix(--sortKey, true)
|
} else if (sortKey === startKey) {
|
realKey = endRealKey
|
sortKey = endKey
|
}
|
} else if (startKey > endKey) {
|
// 倒序拖动
|
if (sortKey >= endKey && sortKey < startKey) {
|
++realKey
|
sortKey = excludeFix(++sortKey, false)
|
} else if (sortKey === startKey) {
|
realKey = endRealKey
|
sortKey = endKey
|
}
|
}
|
|
if (item.sortKey != sortKey) {
|
item.translateX = (sortKey % basedata.columns) * 100 + '%'
|
item.translateY = Math.floor(sortKey / basedata.columns) * 100 + '%'
|
item.sortKey = sortKey
|
item.realKey = realKey
|
}
|
return item
|
})
|
}
|
|
var triggerCustomEvent = function(list, type, instance) {
|
if (!instance) return
|
var _list = [],
|
listData = [];
|
|
list.forEach(function(item) {
|
_list[item.sortKey] = item
|
})
|
_list.forEach(function(item) {
|
listData.push(item.data)
|
})
|
|
// 编译到小程序 funcName作为参数传递导致事件不执行
|
switch(type) {
|
case 'change':
|
instance.callMethod('change', {data: listData})
|
break
|
case 'sortEnd':
|
instance.callMethod('sortEnd', {data: listData})
|
break
|
}
|
}
|
|
var listObserver = function(newVal, oldVal, ownerInstance, instance) {
|
var state = ownerInstance.getState()
|
state.itemsInstance = ownerInstance.selectAllComponents('.tn-drag__item')
|
|
state.list = newVal || []
|
|
state.list.forEach(function(item, index) {
|
var itemInstance = state.itemsInstance[index]
|
if (item && itemInstance) {
|
itemInstance.setStyle({
|
'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)'
|
})
|
if (item.fixed) itemInstance.addClass('tn-drag__fixed')
|
}
|
})
|
}
|
|
var baseDataObserver = function(newVal, oldVal, ownerInstance, instance) {
|
var state = ownerInstance.getState()
|
state.basedata = newVal
|
}
|
|
var longPress = function(event, ownerInstance) {
|
var instance = event.instance
|
var dataset = instance.getDataset()
|
var state = ownerInstance.getState()
|
|
edit = bool(dataset.edit)
|
if (!edit) return
|
if (!state.basedata || state.basedata === 'undefined') {
|
state.basedata = JSON.parse(dataset.basedata)
|
}
|
var basedata = state.basedata
|
var touches = event.changedTouches[0]
|
if (!touches) return
|
|
state.current = +dataset.index
|
|
// 初始项是固定项则返回
|
var item = state.list[state.current]
|
if (item && item.fixed) return
|
|
// 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果
|
if (state.dragging) return
|
|
ownerInstance.callMethod("drag", {
|
dragging: true
|
})
|
|
// 计算X, Y轴初始位移，使item中心移动到点击处，单列的时候X轴初始不做位移
|
state.translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left)
|
state.translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top)
|
state.touchId = touches.identifier
|
|
instance.setStyle({
|
'transform': 'translate3d(' + state.translateX + 'px,' + state.translateY +'px, 0)'
|
})
|
state.itemsInstance.forEach(function(item, index) {
|
item.removeClass("tn-drag__transition").removeClass("tn-drag__current")
|
item.addClass(index === state.current ? "tn-drag__current" : "tn-drag__transition")
|
})
|
|
ownerInstance.callMethod("vibrate")
|
state.dragging = true
|
}
|
|
var touchStart = function(event, ownerInstance) {
|
var instance = event.instance
|
var dataset = instance.getDataset()
|
edit = bool(dataset.edit)
|
}
|
|
var touchMove = function(event, ownerInstance) {
|
var instance = event.instance
|
var dataset = instance.getDataset()
|
var state = ownerInstance.getState()
|
var basedata = state.basedata
|
|
if (!state.dragging || !edit) return
|
var touches = event.changedTouches[0]
|
if (!touches) return
|
|
// 如果不是同一个触发点则返回
|
if (state.touchId !== touches.identifier) return
|
|
// 计算X,Y轴位移, 单列时候X轴初始不做位移
|
var translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left)
|
var translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top)
|
|
// 到顶到低自动滑动
|
if (touches.clientY > basedata.windowHeight - basedata.itemHeight - basedata.realBottomSize) {
|
// 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度)
|
ownerInstance.callMethod('pageScroll', {
|
scrollTop: touches.pageY + basedata.itemHeight - (basedata.windowHeight - basedata.realBottomSize)
|
})
|
} else if (touches.clientY < basedata.itemHeight + basedata.realTopSize) {
|
// 当前触摸点pageY - item高度 - 顶部固定区域高
|
ownerInstance.callMethod('pageScroll', {
|
scrollTop: touches.pageY - basedata.itemHeight - basedata.realTopSize
|
})
|
}
|
|
// 设置当前激活元素的偏移量
|
instance.setStyle({
|
'transform': 'translate3d('+ translateX + 'px,' + translateY + 'px, 0)'
|
})
|
|
var startKey = state.list[state.current].sortKey
|
var currentX = Math.round(translateX / basedata.itemWidth)
|
var currentY = Math.round(translateY / basedata.itemHeight)
|
var endKey = currentX + basedata.columns * currentY
|
|
// 目标项时固定项则返回
|
var item = state.list[endKey]
|
if (item && item.fixed) return
|
|
// X轴或者Y轴超出范围则返回
|
if (isOutRange(currentX, basedata.columns, currentY, basedata.rows, endKey, state.list.length)) return
|
|
// 防止拖拽过程中发生乱序问题
|
if (startKey === endKey || startKey === state.preStartKey) return
|
state.preStartKey = startKey
|
|
var list = sortCore(startKey, endKey, state)
|
state.itemsInstance.forEach(function(itemInstance, index) {
|
var item = list[index]
|
if (index !== state.current) {
|
itemInstance.setStyle({
|
'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)'
|
})
|
}
|
})
|
|
// ownerInstance.callMethod('vibrate')
|
ownerInstance.callMethod('listDataChange', {
|
data: list
|
})
|
triggerCustomEvent(list, "change", ownerInstance)
|
}
|
|
var touchEnd = function(event, ownerInstance) {
|
var instance = event.instance
|
var dataset = instance.getDataset()
|
var state = ownerInstance.getState()
|
var basedata = state.basedata
|
|
if (!state.dragging || !edit) return
|
triggerCustomEvent(state.list, "sortEnd", ownerInstance)
|
|
instance.addClass('tn-drag__transition')
|
instance.setStyle({
|
'transform': 'translate3d('+ state.list[state.current].translateX + ',' + state.list[state.current].translateY + ', 0)'
|
})
|
state.itemsInstance.forEach(function(item, index) {
|
item.removeClass('tn-drag__transition')
|
})
|
|
state.preStartKey = -1
|
state.dragging = false
|
ownerInstance.callMethod('drag', {
|
dragging: false
|
})
|
state.current = -1
|
state.translateX = 0
|
state.translateY = 0
|
}
|
|
module.exports = {
|
longPress: longPress,
|
touchStart: touchStart,
|
touchMove: touchMove,
|
touchEnd: touchEnd,
|
baseDataObserver: baseDataObserver,
|
listObserver: listObserver
|
}
|
