小程序拖拽功能

html

<!--pages/sort/index.wxml-->
<view class='orderInfo'>
  <view class='tips'>
    提示：长按列表单元格上下拖动放置排序
  </view>
  <movable-area class='movable-area' style='display:{{movableViewInfo.showClass}}; height:{{pageInfo.scrollHeight}}%;'>
    <movable-view class='content movable-row' out-of-bounds='true' damping='999' style='height:{{pageInfo.rowHeight}}px;' direction="vertical" y="{{movableViewInfo.y}}">
      {{movableViewInfo.data}}
    </movable-view>
  </movable-area>
  <scroll-view scroll-y='{{pageInfo.scrollY}}' style='height: {{pageInfo.scrollHeight}}%'>
    <block wx:for='{{optionList}}'>
      <view class='content {{pageInfo.readyPlaceIndex == index ? "ready-place" : ""}}' style='height: {{pageInfo.rowHeight}}px;'>
        {{item}}
        <view class="iconfont icon-liebiaopailie" data-index='{{index}}' bindtouchstart='dragStart' bindtouchmove='dragMove' bindtouchend='dragEnd'></view>
      </view>
    </block>
  </scroll-view>
</view>
<view class='btn btn2' bindtap='management'>
  <text>保存</text>
</view>

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