排序组件

api/pages/mst/basicData.js

@@ -15,6 +15,10 @@ module.exports = {
   },
 
   routeUrl: {
-    basicData: {}
+    basicData: {
+      sort:{
+        key:'sort',url:'/package-basic-data/pages/basic-data/basic-data-sort/basic-data-sort'
+      }
+    }
   }
 };

app.json

@@ -316,7 +316,9 @@
         "dk-collapse-item": "components/dkbase/dk-collapse-item/dk-collapse-item",
         "dk-tree": "components/dkbase/dk-tree/dk-tree",
         "dk-tree-form": "components/dkbase/dk-tree-form/dk-tree-form",
-        "dk-tree-form-more": "components/dkbase/dk-tree-form-more/dk-tree-form-more"
+        "dk-tree-form-more": "components/dkbase/dk-tree-form-more/dk-tree-form-more",
+        "dk-drag-item": "components/dkbase/dk-drag-item/dk-drag-item",
+        "dk-drag-to-sort": "components/dkbase/dk-drag-to-sort/dk-drag-to-sort"
     },
     "tabBar": {
         "color": "#95A8CB",

components/dkbase/dk-drag-item/dk-drag-item.js

@@ -0,0 +1,80 @@
+Component({
+  relations: {
+      '../dk-drag-to-sort/dk-drag-to-sort': {
+          type: 'parent', // 关联的目标节点应为父节点
+          linked: function(target) {
+              const {dragY, dragX} = target.data
+              const systemInfo = wx.getSystemInfoSync()
+              this.parent = target
+              this.setData({ dragY, dragX, window: {width: systemInfo.windowWidth, height: systemInfo.windowHeight}, linked: true })
+              this.updatePosList = data => {
+                  const {rect, dataset} = data
+                  target.posList = target.posList || []
+                  target.posList.push({originalIndex: dataset.idx, currentIndex: dataset.idx, size: {width: rect.width, height: rect.height}, translate: {x: 0, y: 0}})
+                  target.posListLen = target.posListLen || 0
+                  target.posListLen += 1
+                  if (target.posListLen == target.data.length) {
+                      target.posList = target.posList.sort(this.arrayCompare('currentIndex'))
+                      target.allChildLinked(target.posList)
+                  }
+              }
+          }
+      }
+  },
+  options: {
+      multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
+  properties: {
+      idx: {
+          type: Number,
+          value: 0
+      }
+  },
+  data: {
+      
+  },
+  methods: {
+      getScrollerRect() {
+          return
+          this.parent.getScrollerRect()
+      },
+      updatePos({pos, updateIndex, oldPos, newPos}) {
+          console.log('updatePos', pos, updateIndex, oldPos, newPos)
+          let posList = this.parent.posList.map(item => {
+              if (item.originalIndex == pos.originalIndex) {
+                  return pos
+              } else {
+                  return item
+              }
+          })
+          this.parent.posList = posList
+          if (updateIndex !== undefined) {
+              this.parent.noticeChildInited(updateIndex)
+          } else {
+              this.parent.noticeChildInited()
+          }
+          if (oldPos != newPos) {
+              this.parentPosChange({oldPos, newPos})
+          }
+      },
+      updatePosDate(posList) {
+          this.setData({posList})
+      },
+      arrayCompare (property) {
+          return function (a, b) {
+              var value1 = a[property]
+              var value2 = b[property]
+              return value1 - value2
+          }
+      },
+      log(data) {
+          console.log(data)
+      },
+      parentChange(data) {
+          this.parent.change(data)
+      },
+      parentPosChange(data) {
+          this.parent.posChange(data)
+      }
+  }
+})

components/dkbase/dk-drag-item/dk-drag-item.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/dkbase/dk-drag-item/dk-drag-item.wxml

@@ -0,0 +1,5 @@
+<wxs module="dragToSort" src="./index.wxs"></wxs>
+<view class="drag-and-drop-item" linked="{{linked}}" change:linked="{{dragToSort.linked}}" poslist="{{posList}}" change:poslist="{{dragToSort.posListChanged}}" data-idx="{{idx}}" data-drag-direction="{{dragY ? 'dragY' : (dragX ? 'dragX' : '')}}">
+    <slot name="body"></slot>
+    <slot name="btn" bind:longpress="{{dragToSort.longPress}}" bind:touchmove="{{dragToSort.touchMove}}" bind:touchend="{{dragToSort.touchEnd}}" data-idx="{{idx}}" data-drag-direction="{{dragY ? 'dragY' : (dragX ? 'dragX' : '')}}" data-pos-list="{{posList}}" data-window="{{window}}"></slot>
+</view>

components/dkbase/dk-drag-item/dk-drag-item.wxss

@@ -0,0 +1,14 @@
+.drag-and-drop-item{
+  word-break: break-all;
+  position: relative;
+  z-index: 1;
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  flex-direction: inherit;
+  flex-wrap: inherit;
+  flex: 1;
+}
+:host{
+  position: relative;
+}

components/dkbase/dk-drag-item/index.wxs

@@ -0,0 +1,276 @@
+var arrayCompare = function (property) {
+  return function (a, b) {
+      var value1 = a[property]
+      var value2 = b[property]
+      return value1 - value2
+  }
+}
+
+var getBounds = function (idx, posList, dragDirection) { // 获取边界值
+  var posList = posList.concat([]).sort(arrayCompare('currentIndex'))
+  var bounds = []
+  var sum = 0
+  var pre = 0
+  var center = 0
+  var next = 0
+  if (dragDirection == 'dragY') { // y轴可拖拽
+      posList.forEach(function (item, index) {
+          if (index < idx || index > idx) { // pre
+              bounds.push(sum + (item.size.height / 2))
+              sum += item.size.height
+          } else if (index == idx) {
+              pre = sum
+              bounds.push(sum + (item.size.height / 2))
+              sum += item.size.height
+              center = bounds[bounds.length - 1]
+              next = sum
+          }
+      })
+  } else if (dragDirection == 'dragX') { // x轴可拖拽
+      posList.forEach(function (item, index) {
+          if (index < idx || index > idx) { // pre
+              bounds.push(sum + (item.size.width / 2))
+              sum += item.size.width
+          } else if (index == idx) {
+              pre = sum
+              bounds.push(sum + (item.size.width / 2))
+              sum += item.size.width
+              center = bounds[bounds.length - 1]
+              next = sum
+          }
+      })
+  }
+  bounds = bounds.filter(function (item) {
+      return item != center
+  }).map(function (item) {
+      if (item > center) {
+          return item - next
+      } else if (item < center) {
+          return item - pre
+      }
+  })
+  return { bounds, pre, center, next }
+}
+
+var initBounds = function (e, ownerInstance) {
+  var state = ownerInstance.getState()
+  var window = e.currentTarget.dataset.window
+  var idx = e.currentTarget.dataset.idx
+  var dragDirection = e.currentTarget.dataset.dragDirection
+  var currentIdx = state.posList[idx].currentIndex
+  var clientX = parseInt(e.touches[0].clientX)
+  var clientY = parseInt(e.touches[0].clientY)
+  // 拖拽的是第几个，用于高亮显示等
+  ownerInstance.addClass('dragging')
+  ownerInstance.callMethod('log', {event: 'initBounds', ownerInstance: ownerInstance, e: e})
+  var wxsStyle = {}
+  if (dragDirection == 'dragY') {
+      wxsStyle = {'-webkit-transform': 'translateY(' + state.posList[idx].translate.y + 'px)', 'transform': 'translateY(' + state.posList[idx].translate.y + 'px)', 'zIndex': '99'}
+  } else if (dragDirection == 'dragX') {
+      wxsStyle = {'-webkit-transform': 'translateX(' + state.posList[idx].translate.x + 'px)', 'transform': 'translateX(' + state.posList[idx].translate.x + 'px)', 'zIndex': '99'}
+  }
+  
+  ownerInstance.setStyle(wxsStyle)
+  // 记录安全区域
+  state.window = window
+  // 拖拽起始点坐标（clientX, clientY）
+  state.lastPoint = {x: clientX, y: clientY}
+  state.dragStartOffset = { x: clientX, y: clientY }
+  state.offsetRect = {top: 20, right: state.window.width - 20, bottom: state.window.height - 20, left: 20}
+  // 拖拽的元素，记录下此时的数据，在拖拽过程中使用，此处要深拷贝
+  state.dragEle = JSON.parse(JSON.stringify(state.posList[idx]))
+  // 基于拖拽的元素当前的排序，获取边界信息，并获取到前一个/后一个的边界值（即超过该边界值时，排序会发生变化）
+  var boundResult = getBounds(currentIdx, state.posList, dragDirection)
+  state.bounds = boundResult.bounds
+  state.boundaryPre = state.bounds[currentIdx - 1]
+  state.boundaryNext = state.bounds[currentIdx]
+  // 初始化拖拽元素最终的偏移量
+  state.dragEndDistance = 0
+  // 初始化拖拽元素所在的排序位置（实时变化）为undefined
+  state._currentIdx = undefined
+  // 记录当前排序，用于拖拽结束后对比排序，决定是否触发change事件
+  var _posList = JSON.parse(JSON.stringify(state.posList))
+  state._sortArr = _posList.sort(arrayCompare('currentIndex')).map(function (item) {
+      return item.originalIndex
+  })
+  ownerInstance.callMethod('getScrollerRect')
+}
+
+
+module.exports = {
+  posListChanged: function (newVal, oldVal, ownerInstance, instance) {
+      var state = ownerInstance.getState()
+      if (!oldVal && newVal) {
+          state.transitionStyle = ownerInstance.getComputedStyle(['-webkit-transition', 'transition'])
+      }
+      if (newVal && !state.dragging && (state.idx || state.idx === 0) && state.dragElement) {
+          ownerInstance.removeClass('dragging')
+          ownerInstance.setStyle({'-webkit-transition': state.transitionStyle ? (state.transitionStyle['-webkit-transition'] + ', transform 0.3s') : 'transform 0.3s', 'transition': state.transitionStyle ? (state.transitionStyle['transition'] + ', transform 0.3s') : 'transform 0.3s', 'transform': 'translateY(' + newVal[state.idx].translate.y + 'px)', transform: 'translateY(' + newVal[state.idx].translate.y + 'px)', 'z-index': '1'})
+      }
+  },
+  linked: function (newVal, oldVal, ownerInstance, instance) {
+      var state = ownerInstance.getState()
+      if (newVal) {
+          state.dragElement = ownerInstance.selectComponent('.drag-and-drop-item')
+          var rect = ownerInstance.getBoundingClientRect()
+          var dataset = state.dragElement.getDataset()
+          ownerInstance.callMethod('updatePosList', {rect, dataset})
+          state.idx = dataset.idx
+      }
+  },
+  longPress: function (e, ownerInstance) {
+      var state = ownerInstance.getState()
+      state.dragElement = ownerInstance.selectComponent('.drag-and-drop-item')
+      state.posList = e.currentTarget.dataset.posList
+      state.dragging = true
+      if (state.posList && state.posList.length > 0) {
+          initBounds(e, ownerInstance)
+      }
+  },
+  touchMove: function (e, ownerInstance) {
+      var state = ownerInstance.getState()
+      if (!state.dragStartOffset) { // 起始点坐标不存在则认为没有进行拖拽操作，在拖拽结束的时候需要重置为undefined
+          return
+      }
+      var dragDirection = e.currentTarget.dataset.dragDirection
+      var clientX = parseInt(e.touches[0].clientX)
+      var clientY = parseInt(e.touches[0].clientY)
+      // 拖拽元素相对于起始点的偏移坐标
+      state.point = {x: clientX, y: clientY}
+      var distanceOffset = { x: clientX - state.dragStartOffset.x, y: clientY - state.dragStartOffset.y }
+      // 初始化拖拽元素即将达到的排序
+      var willIndex = undefined
+      // 初始化纵向/横向的拖拽距离int
+      var distance = 0
+      // 拖拽过程中，拖拽元素所在的排序位置（实时变化）
+      state._currentIdx = state._currentIdx == undefined ? state.dragEle.currentIndex : state._currentIdx
+      // 拖拽元素的初始排序（排序列表初始化时的排序）
+      var originalIndex = state.dragEle.originalIndex
+      // 判断拖拽方向
+      // var direction = ''
+      // var outOffArea = ''
+      // if (dragDirection == 'dragY') {
+      //     direction = state.point.y - state.lastPoint.y > 0 ? 'y' : '-y'
+      //     outOffArea = (state.point.y - state.posList[originalIndex].size.height / 2 < state.offsetRect.top) || (state.point.y + state.posList[originalIndex].size.height / 2 > state.offsetRect.bottom)
+      // } else if (dragDirection == 'dragX') {
+      //     direction = state.point.x - state.lastPoint.x > 0 ? 'x' : '-x'
+      //     outOffArea = (state.point.x - state.posList[originalIndex].size.width / 2 < state.offsetRect.left) || (state.point.x + state.posList[originalIndex].size.width / 2 > state.offsetRect.right)
+      // }
+      // if (outOffArea) {
+
+      // }
+      // // 实时更新拖拽元素的位置
+      if (dragDirection == 'dragY') {
+          state.posList[originalIndex].translate.y = state.dragEle.translate.y + distanceOffset.y
+          ownerInstance.setStyle({'-webkit-transition': 'none', 'transition': 'none', '-webkit-transform': 'translateY(' + state.posList[originalIndex].translate.y + 'px)', 'transform': 'translateY(' + state.posList[originalIndex].translate.y + 'px)', 'z-index': '99'})
+          distance = distanceOffset.y
+      } else if (dragDirection == 'dragX') {
+          state.posList[originalIndex].translate.x = state.dragEle.translate.x + distanceOffset.x
+          ownerInstance.setStyle({'-webkit-transition': 'none', 'transition': 'none', '-webkit-transform': 'translateX(' + state.posList[originalIndex].translate.x + 'px)', 'transform': 'translateX(' + state.posList[originalIndex].translate.x + 'px)', 'z-index': '99'})
+          distance = distanceOffset.x
+      }
+
+      if (!state.currentIndexChanging) { // 当拖拽元素在设置时不执行，避免太过频繁的更新数据导致卡顿
+          // 前一个的边界值存在 且 距离超过该边界时，认为排序向前移动
+          if (state.boundaryPre !== undefined && distance < state.boundaryPre) {
+              // 更新排序，并获取拖拽元素所取代元素的初始排序（排序列表初始化时的排序）
+              willIndex = state._currentIdx - 1
+              var preOriginalIndex = state.posList.filter(function (item) {
+                  return item.currentIndex === willIndex
+              })[0].originalIndex
+              // 更新currentIndex字段，并更改拖拽元素所取代元素的偏移
+              if (dragDirection == 'dragY') {
+                  state.posList[preOriginalIndex].translate.y = state.posList[preOriginalIndex].translate.y + state.dragEle.size.height
+              } else if (dragDirection == 'dragX') {
+                  state.posList[preOriginalIndex].translate.x = state.posList[preOriginalIndex].translate.x + state.dragEle.size.width
+              }
+              state.posList[preOriginalIndex].currentIndex = parseInt(state._currentIdx)
+              state.posList[originalIndex].currentIndex = parseInt(willIndex)
+              ownerInstance.callMethod('updatePos', {pos: state.posList[preOriginalIndex], updateIndex: preOriginalIndex, oldPos: state._currentIdx, newPos: willIndex})
+
+              // 更新操作数据
+              state._currentIdx = state._currentIdx - 1
+              if (dragDirection == 'dragY') {
+                  state.dragEndDistance -= state.posList[preOriginalIndex].size.height
+              } else if (dragDirection == 'dragX') {
+                  state.dragEndDistance -= state.posList[preOriginalIndex].size.width
+              }
+              
+              // 当排序有变化时，锁定，直到界面更新渲染完毕后取消锁定
+              state.currentIndexChanging = true
+          } else if (state.boundaryNext !== undefined && distance > state.boundaryNext) {
+              // 更新排序，并获取拖拽元素所取代元素的初始排序（排序列表初始化时的排序）
+              willIndex = state._currentIdx + 1
+              var nextOriginalIndex = state.posList.filter(function (item) {
+                  return item.currentIndex === willIndex
+              })[0].originalIndex
+              // 更新currentIndex字段，并更改拖拽元素所取代元素的偏移
+              if (dragDirection == 'dragY') {
+                  state.posList[nextOriginalIndex].translate.y = state.posList[nextOriginalIndex].translate.y - state.dragEle.size.height
+              } else if (dragDirection == 'dragX') {
+                  state.posList[nextOriginalIndex].translate.x = state.posList[nextOriginalIndex].translate.x - state.dragEle.size.width
+              }
+              state.posList[nextOriginalIndex].currentIndex = parseInt(state._currentIdx)
+              state.posList[originalIndex].currentIndex = parseInt(willIndex)
+              ownerInstance.callMethod('updatePos', {pos: state.posList[nextOriginalIndex], updateIndex: nextOriginalIndex, oldPos: state._currentIdx, newPos: willIndex})
+              
+              // 更新操作数据
+              state._currentIdx = state._currentIdx + 1
+              if (dragDirection == 'dragY') {
+                  state.dragEndDistance += state.posList[nextOriginalIndex].size.height
+              } else if (dragDirection == 'dragX') {
+                  state.dragEndDistance += state.posList[nextOriginalIndex].size.width
+              }
+              
+              // 当排序有变化时，锁定，直到界面更新渲染完毕后取消锁定
+              state.currentIndexChanging = true
+          }
+          // 如果排序有变化，则更新前一个/后一个边界值
+          if (state.currentIndexChanging) {
+              state.boundaryPre = state.bounds[state._currentIdx - 1]
+              state.boundaryNext = state.bounds[state._currentIdx]
+          }
+      }
+
+      state.lastPoint = {x: clientX, y: clientY}
+      state.currentIndexChanging = false
+      if (state.dragging) {
+          return false
+      }
+  },
+  touchEnd: function (e, ownerInstance) {
+      var state = ownerInstance.getState()
+      if (!state.dragStartOffset) {
+          return
+      }
+      var dragDirection = e.currentTarget.dataset.dragDirection
+      // 清除拖拽起始点坐标，仅在长按后可获得起始点坐标
+      state.dragStartOffset = undefined
+      state.dragging = false
+      
+      if (state.dragEle) {
+          var originalIndex = state.dragEle.originalIndex
+          ownerInstance.removeClass('dragging')
+          // ownerInstance.removeClass('item-dragging')
+          // 根据最终拖拽元素的偏移，更新拖拽元素的位置
+          if (dragDirection == 'dragY') {
+              state.posList[originalIndex].translate.y = state.dragEle.translate.y + state.dragEndDistance
+              ownerInstance.setStyle({'-webkit-transition': state.transitionStyle ? (state.transitionStyle['-webkit-transition'] + ', transform 0.3s') : 'transform 0.3s', 'transition': state.transitionStyle ? (state.transitionStyle['transition'] + ', transform 0.3s') : 'transform 0.3s', '-webkit-transform': 'translateY(' + state.posList[originalIndex].translate.y + 'px)', 'transform': 'translateY(' + state.posList[originalIndex].translate.y + 'px)', 'z-index': '1'})
+          } else if (dragDirection == 'dragX') {
+              state.posList[originalIndex].translate.x = state.dragEle.translate.x + state.dragEndDistance
+              ownerInstance.setStyle({'-webkit-transition': state.transitionStyle ? (state.transitionStyle['-webkit-transition'] + ', transform 0.3s') : 'transform 0.3s', 'transition': state.transitionStyle ? (state.transitionStyle['transition'] + ', transform 0.3s') : 'transform 0.3s', '-webkit-transform': 'translateX(' + state.posList[originalIndex].translate.x + 'px)', 'transform': 'translateX(' + state.posList[originalIndex].translate.x + 'px)', 'z-index': '1'})
+          }
+          ownerInstance.callMethod('updatePos', {pos: state.posList[originalIndex]})
+      }
+
+      var _posList = JSON.parse(JSON.stringify(state.posList))
+      var sortArr = _posList.sort(arrayCompare('currentIndex')).map(function (item) {
+          return item.originalIndex
+      })
+      if (state._sortArr && JSON.stringify(state._sortArr) != JSON.stringify(sortArr)) { // 排序改变，触发change事件，否则不触发
+          ownerInstance.callMethod('parentChange', { sort: sortArr })
+      }
+      state._sortArr = undefined
+      
+  }
+}

components/dkbase/dk-drag-to-sort/dk-drag-to-sort.js

@@ -0,0 +1,105 @@
+Component({
+  relations: {
+      '../dk-drag-item/dk-drag-item': {
+        type: 'child', // 关联的目标节点应为子节点
+        linked: function(target) {
+          console.log('关联的目标节点应为子节点')
+          this.child = this.child || []
+          this.child.push(target)
+        }
+      }
+  },
+  properties: {
+      dragY: {
+          type: Boolean,
+          value: false
+      },
+      dragX: {
+          type: Boolean,
+          value: false
+      },
+      length: {
+          type: Number,
+          value: 0
+      }
+  },
+  data: {
+      allLoaded: false
+  },
+  methods: {
+      getScrollerRect() {
+          const _query = this.createSelectorQuery()
+          const query = wx.createSelectorQuery()
+          _query.select('.drag-and-drop-list').boundingClientRect().exec(res => {
+              console.log('_query_res', res)
+          })
+          query.select('#scroller').fields({
+              size: true,
+              scrollOffset: true,
+              properties: ['scrollX', 'scrollY'],
+              context: true,
+            }).exec(res => {
+              console.log('query_res', res)
+          })
+      },
+      noticeChildInited(index) { // 如果index不为undefined，着仅更新index指定的子元素，否则认为更新全部元素
+          if (this.child && this.posList) {
+              this.child.forEach(child => {
+                  if (index === undefined || (index !== undefined && child.data.idx == index)) {
+                      child.updatePosDate(this.posList)
+                  }
+              })
+          }
+      },
+      log(data) {
+          console.log(data)
+      },
+      allChildLinked(posList) {
+          const pages = getCurrentPages()
+          const lastPage = pages[pages.length - 1]
+          setTimeout(() => {
+              const query = wx.createSelectorQuery()
+              query.select('#scroller').scrollOffset().exec((res) => {
+                  console.log('rect', res)
+              })
+          }, 3000)
+          
+
+          // console.log('rect', rect)
+          let _posList = []
+          let height = 0
+          let width = 0
+          posList.forEach(item => {
+              height += item.size.height
+              width += item.size.width
+          })
+          
+          let spaceTop = 0
+          let spaceLeft = 0
+          
+          _posList = posList.map(item => {
+              item.space = {top: spaceTop, right: width - spaceLeft - item.size.width, bottom: height - spaceTop - item.size.height, left: spaceLeft}
+              if (this.data.dragY) {
+                  item.space.left = null
+                  item.space.right = null
+              } else if (this.data.dragX) {
+                  item.space.top = null
+                  item.space.bottom = null
+              }
+              spaceTop += item.size.height
+              spaceLeft += item.size.width
+              return item
+          })
+          this.posList = _posList
+          console.log('posList', this.posList)
+          this.noticeChildInited()
+      },
+      change(data) {
+          this.triggerEvent('change', data)
+      },
+      posChange(data) {
+          // console.log('posChange', data)
+          this.triggerEvent('poschange', data)
+      }
+  }
+})

components/dkbase/dk-drag-to-sort/dk-drag-to-sort.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/dkbase/dk-drag-to-sort/dk-drag-to-sort.wxml

@@ -0,0 +1,3 @@
+<view class="drag-and-drop-list{{dragY ? ' drag-y' : ''}}{{dragX ? ' drag-x' : ''}}" data-drag-direction="{{dragY ? 'dragY' : (dragX ? 'dragX' : '')}}">
+    <slot></slot>
+</view>

components/dkbase/dk-drag-to-sort/dk-drag-to-sort.wxss

@@ -0,0 +1,21 @@
+.wrapper{
+  position: relative;
+}
+.drag-and-drop-list{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  position: relative;
+}
+.drag-and-drop-list.drag-y{
+  flex-direction: column;
+}
+.drag-and-drop-list.drag-x{
+flex-direction: row;
+}
+.drag-and-drop-item{
+  word-break: break-all;
+  position: relative;
+  z-index: 1;
+}

package-basic-data/pages/basic-data/basic-data-sort/basic-data-sort.js

@@ -1,66 +1,14 @@
-// package-basic-data/pages/basic-data/basic-data-sort/basic-data-sort.js
 Page({
-
-    /**
-     * 页面的初始数据
-     */
-    data: {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面隐藏
-     */
-    onHide() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面卸载
-     */
-    onUnload() {
-
-    },
-
-    /**
-     * 页面相关事件处理函数--监听用户下拉动作
-     */
-    onPullDownRefresh() {
-
-    },
-
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom() {
-
-    },
-
-    /**
-     * 用户点击右上角分享
-     */
-    onShareAppMessage() {
-
-    }
+  data: {
+    list: ['测试11111', '测试22222', '测试33333', '测试444444', '测试555555', '测试66666', '测试77777', '测试88888888', '测试9999999999999', '101010101010', '20202020202002020','3030303030303030', '404040404040404040', '5050505050505050', '6060606060606060606', '70707070707070707070'],
+  },
+  sortChange(e) {
+    console.log('sortChange', e)
+  },
+  posChange(e) {
+    // console.log('posChange', e)
+    // wx.vibrateShort({
+    //   type: 'light'
+    // })
+  }
 })

package-basic-data/pages/basic-data/basic-data-sort/basic-data-sort.wxml

@@ -1,2 +1,13 @@
-<!--package-basic-data/pages/basic-data/basic-data-sort/basic-data-sort.wxml-->
-<text>package-basic-data/pages/basic-data/basic-data-sort/basic-data-sort.wxml</text>
+<!--index.wxml-->
+<view class="container">
+  <scroll-view id="scroller" scroll-y>
+    <dk-drag-to-sort length="{{list.length}}" drag-y bind:change="sortChange" bind:poschange="posChange">
+      <dk-drag-item wx:for="{{list}}" wx:key="*this" class="item" idx="{{index}}">
+        <view slot="body" class="body">{{item}}</view>
+        <view slot="btn" class="btn">
+          <view class="btn-sign"></view>
+        </view>
+      </dk-drag-item>
+    </dk-drag-to-sort>
+  </scroll-view>
+</view>

package-basic-data/pages/basic-data/basic-data-sort/basic-data-sort.wxss

@@ -1 +1,39 @@
-/* package-basic-data/pages/basic-data/basic-data-sort/basic-data-sort.wxss */
+/**index.wxss**/
+#scroller{
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.item{
+  min-height: 80rpx;
+  font-size: 32rpx;
+  line-height: 56rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  word-break: break-all;
+  position: relative;
+  padding: 0 0 0 20px;
+  transition: all 0.3s;
+}
+.item.dragging{
+  background: pink;
+  color: yellow
+}
+.body{
+  flex: 1;
+}
+.btn{
+  padding: 10px 20px 10px 20px;
+}
+.btn .btn-sign, .btn:before, .btn:after{
+  display: block;
+  content: " ";
+  margin: 4px 0;
+  width: 40rpx;
+  height: 2px;
+  background: #999999;
+  border-radius: 2px;
+}

package-basic-data/pages/basic-data/basic-data.js

@@ -213,7 +213,13 @@ Page({
   * @date : 2024/1/23 9:16
   */
   toSort() {
-
+    wx.navigateTo({
+      url: this.data.route.sort.url,
+      success: function (res) {
+        // 通过eventChannel向被打开页面传送数据 TODO 测试例子url是写死的，实际中，需要从route中读取
+        res.eventChannel.emit('params', {})
+      }
+    })
   },
   /**
     * @desc : 设置查询参数