小程序拖拽功能

html

  
    提示：长按列表单元格上下拖动放置排序
  
  
    
      {{movableViewInfo.data}}
    
  
  
    
      
        {{item}}
        
      
    
  


  保存

CSS

/* pages/sort/index.wxss */

page {
  background-color: #f8f5f4;
}

.orderInfo {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding-top: 10rpx;
  background-color: #f8f5f4;
}

.content {
  width: 94%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  font-size: 30rpx;
  padding: 0 3%;
  border-bottom: 1rpx #e3e3e3 solid;
  justify-content: space-around;
  align-items: center;
}
.movable-row {
  box-shadow: #D9D9D9 0px 0px 20px;
}

.movable-area {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
}
.ready-place {
  background-color: #CCCCCC
}
.content .iconfont {
  float: right;
  color: #c9c9c9;
  font-size: 46rpx;
}

.tips {
  font-size: 22rpx;
  color: #999;
  padding: 20rpx;
  border-bottom: 1rpx #e3e3e3 solid;
}

.btn {
  width: 96rpx;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 44rpx;
  background-color: #06c1ae;
  text-align: center;
  color: #fff;
}

.btn text {
  display: block;
  font-size: 30rpx;
}

.btn2 {
  position: fixed;
  bottom: 30rpx;
  left: 630rpx;
}

JS

Page({

  /**
   * 页面的初始数据
   */
  data: {
    optionList: [],

    movableViewInfo: {
      y: 0,
      showClass: 'none',
      data: {}
    },

    pageInfo: {
      rowHeight: 47,
      scrollHeight: 85,

      startIndex: null,
      scrollY: true,
      readyPlaceIndex: null,
      startY: 0,
      selectedIndex: null,
    }
  },

  dragStart: function (event) {
    var startIndex = event.target.dataset.index
    // 初始化页面数据
    var pageInfo = this.data.pageInfo
    pageInfo.startY = event.touches[0].clientY
    pageInfo.readyPlaceIndex = startIndex
    pageInfo.selectedIndex = startIndex
    pageInfo.scrollY = false
    pageInfo.startIndex = startIndex

    this.setData({
      'movableViewInfo.y': pageInfo.startY - (pageInfo.rowHeight / 2)
    })
    // 初始化拖动控件数据
    var movableViewInfo = this.data.movableViewInfo
    movableViewInfo.data = this.data.optionList[startIndex]
    movableViewInfo.showClass = "inline"

    this.setData({
      movableViewInfo: movableViewInfo,
      pageInfo: pageInfo
    })
  },

  dragMove: function (event) {
    var optionList = this.data.optionList
    var pageInfo = this.data.pageInfo
    // 计算拖拽距离
    var movableViewInfo = this.data.movableViewInfo
    var movedDistance = event.touches[0].clientY - pageInfo.startY
    movableViewInfo.y = pageInfo.startY - (pageInfo.rowHeight / 2) + movedDistance

    // 修改预计放置位置
    var movedIndex = parseInt(movedDistance / pageInfo.rowHeight)
    var readyPlaceIndex = pageInfo.startIndex + movedIndex
    if (readyPlaceIndex < 0) {
      readyPlaceIndex = 0
    }
    else if (readyPlaceIndex >= optionList.length) {
      readyPlaceIndex = optionList.length - 1
    }

    if (readyPlaceIndex != pageInfo.selectedIndex) {
      var selectedData = optionList[pageInfo.selectedIndex]

      optionList.splice(pageInfo.selectedIndex, 1)
      optionList.splice(readyPlaceIndex, 0, selectedData)
      pageInfo.selectedIndex = readyPlaceIndex
    }
    // 移动movableView
    pageInfo.readyPlaceIndex = readyPlaceIndex
    // console.log('移动到了索引', readyPlaceIndex, '选项为', optionList[readyPlaceIndex])
    console.log(optionList)
    this.setData({
      movableViewInfo: movableViewInfo,
      optionList: optionList,
      pageInfo: pageInfo
    })
  },
  dragEnd: function (event) {
    // 重置页面数据
    var pageInfo = this.data.pageInfo
    pageInfo.readyPlaceIndex = null
    pageInfo.startY = null
    pageInfo.selectedIndex = null
    pageInfo.startIndex = null
    pageInfo.scrollY = true
    // 隐藏movableView
    var movableViewInfo = this.data.movableViewInfo
    movableViewInfo.showClass = 'none'
    this.setData({
      pageInfo: pageInfo,
      movableViewInfo: movableViewInfo
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var optionList = [
      "11",
      "22",
      "33",
      "44",
      "55"
    ]
    this.setData({
      optionList: optionList
    })
  },
})

效果预览

image.png