小程序-拖拽DOM

小程序自带拖拽组件movable

知识点

1. 小程序的组件movable
2. 数组的重新排序

手机上效果图

js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list_date: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var dict_date = {}
    var list_date = [{
        'title': 'title_1',
        'content': 'content_1'
      },
      {
        'title': 'title_2',
        'content': 'content_2'
      },
      {
        'title': 'title_3',
        'content': 'content_3'
      },
      {
        'title': 'title_4',
        'content': 'content_4'
      },
      {
        'title': 'title_5',
        'content': 'content_5'
      }
    ];

    for (var n = 0; n < list_date.length; n++) {
      list_date[n]['height'] = n * 50
      list_date[n]['id'] = n
      dict_date[n] = n
    }
    this.setData({
      'list_date': list_date,
      'dict_date': dict_date
    })
  },

  /**
   * 拖动过程中触发的事件
   */
  dragbindchange: function(e) {
    if (e.detail.source === 'touch') {
      var active_id = this.data.dict_date[this.data.list_date[e.currentTarget.dataset.id].id]
      var hrow_count = Math.floor((e.currentTarget.dataset.id * 50 + 15 - e.detail.y) / 50)

      if (hrow_count < 0) {
        for (var n = active_id + 1; n <= active_id + hrow_count * -1 && n < this.data.list_date.length; n++) {
          this.data.list_date[this.data.dict_date[n]]['height'] = (n - 1) * 50
        }
        this.data.list_date[this.data.dict_date[e.currentTarget.dataset.id]]['height'] = (e.currentTarget.dataset.id - hrow_count) * 50
      } 
      else {
        for (var n = active_id - 1; n >= active_id - hrow_count && n>=0; n--) {
          this.data.list_date[this.data.dict_date[n]]['height'] = (n + 1) * 50
        }
        this.data.list_date[this.data.dict_date[e.currentTarget.dataset.id]]['height'] = (active_id - hrow_count) * 50
      }
    } 
    this.setData({
      'list_date': this.data.list_date
    })
    this.change_site()
  },

  /**
   * 二维数组排序
   */
  objectArraySort : function (keyName) {
    return function (objectN, objectM) {
      var valueN = objectN[keyName]
      var valueM = objectM[keyName]
      if (valueN > valueM) return 1
      else if (valueN < valueM) return -1
      else return 0
    }
  },

    /**
   * 位置映射表
   */
  change_site:function(e){
    if (e != 0) {
      for (var i = 0; i < this.data.list_date.length; i++) {
        this.data.list_date[i]['id'] = Math.floor((this.data.list_date[i].height / 50))
        // 现在位置对应的数组中第几个
        this.data.dict_date[this.data.list_date[i]['id']] = i
      }
    }
    console.info(this.data.dict_date)
  },
  
})

  /**
   * 触碰介绍
   */
  dragbindtouchend: function(e) {
    if (e != 0) {
      for (var i = 0; i<this.data.list_date.length; i++) {
        this.data.list_date[i]['id'] = Math.floor((this.data.list_date[i].height / 50))
        // 现在位置对应的数组中第几个
        this.data.dict_date[this.data.list_date[i]['id']] = i 
      }
    }
    console.info(this.data.dict_date)
  }
})

wxml文件

<view class="section">
  <movable-area style="height: 600rpx;width: 1000px;">
    <view wx:for="{{list_date}}" >
      <movable-view data-id='{{item.id}}' direction="vertical" y="{{item.height}}" class="drag-tab" bindchange='dragbindchange'  damping='150'  bindtouchend='dragbindtouchend'>
        {{item.title}}
      </movable-view>
    </view>
  </movable-area>
</view>

wxss文件

/* pages/test-1/test_1.wxss */

.drag-tab {
  height: 100rpx;
  width: 720rpx;
  border-style: dashed;
  text-align: center;
}