微信小程序实现列表拖拽功能

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
    console.log('获取到的元素为', this.data.optionList[startIndex])
    // 初始化页面数据
    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
    console.log('移动的距离为', 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])
    
    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 = [
      "段落1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
      "段落2 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
      "段落3 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
      "段落4 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
      "段落5 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
      "段落6 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
      "段落7 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
      "段落8 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
      "段落9 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
    ]

    this.setData({
      optionList: optionList    })
  },

  })

WXML

  
    信息
        详情
        排序
  

  
    
      {{movableViewInfo.data}}
      
        
      
      
        
      
    
  

  
    
      
                {{item}}
                
          
        
                
          
        
            
    
  

WXSS

page {
  height: 100%;
  width: 100%;}.zhuti {
  height: 100%;
  width: 100%;

  position: relative;}.row {
  height: 47px;
  width: 100%;

  display: flex;
  justify-content: space-around;
  align-items: center;}.title-row {
  border-bottom: 1px solid #888888;

  color: #888888;}.list-row {
  padding: 8px 0px;
  border-bottom: 1px solid #D9D9D9;
  background-color: white;}.movable-area {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;}.movable-row {
  box-shadow: #D9D9D9 0px 0px 20px;}.col1 { 
  width: 60%;}.col2 { 
  width: 10%;}.col3 { 
  width: 10%;}.ready-place {
  background-color: #CCCCCC}.content {
  font-size: 17px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }