评论

小程序实现列表拖拽排序

拖拽功能在很多场景下都是很方便的操作体验,特别是对于列表本身的排序,不仅直观而且非常效率,这也是本期带给大家的技术分享点,希望各位同学喜欢

小程序列表拖拽排序

wxml

<view class='listbox'>
    <view class='list kelong' hidden='{{!showkelong}}' style='top:{{kelong.top}}px'>
      <view class='index'>?view>
      <image src='{{kelong.xt}}' class='xt'>image>
      <view class='info'>
        <view class="name">{{kelong.name}}view>
        <view class='sub-name'>{{kelong.subname}}view>
      view>
      <image src='/images/sl_36.png' class='more'>image>
    view>

    <view class='list' wx:for="{{optionList}}" wx:key="">
      <view class='index'>{{index+1}}view>
      <image src='{{item.xt}}' class='xt'>image>
      <view class='info'>
        <view class="name">{{item.name}}view>
        <view class='sub-name'>{{item.subname}}view>
      view>
      <image src='/images/sl_36.png' class='more'>image>
      <view class='moreiconpl' data-index='{{index}}' catchtouchstart='dragStart' catchtouchmove='dragMove' catchtouchend='dragEnd'>view>
    view>
  view>

wxss

.map-list .list {
  position: relative;
  height: 120rpx;
}

.map-list .list::after {
  content: '';
  width: 660rpx;
  height: 2rpx;
  background-color: #eee;
  position: absolute;
  right: 0;
  bottom: 0;
}

.map-list .list .xt {
  display: block;
  width: 95rpx;
  height: 77rpx;
  position: absolute;
  left: 93rpx;
  top: 20rpx;
}

.map-list .list .more {
  display: block;
  width: 48rpx;
  height: 38rpx;
  position: absolute;
  right: 30rpx;
  top: 40rpx;
}

.map-list .list .info {
  display: block;
  width: 380rpx;
  height: 80rpx;
  position: absolute;
  left: 220rpx;
  top: 20rpx;
  font-size: 30rpx;
}

.map-list .list .info .sub-name {
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #646567;
}

.map-list .list .index {
  color: #e4463b;
  font-size: 32rpx;
  font-weight: bold;
  position: absolute;
  left: 35rpx;
  top: 40rpx;
}

js

data:{
kelong: {
      top: 0,
      xt: '',
      name: '',
      subname: ''
    },
    replace: {
      xt: '',
      name: '',
      subname: ''
    },
},
dragStart: function(e) {
    var that = this
    var kelong = that.data.kelong
    var i = e.currentTarget.dataset.index
    kelong.xt = this.data.optionList[i].xt
    kelong.name = this.data.optionList[i].name
    kelong.subname = this.data.optionList[i].subname

    var query = wx.createSelectorQuery();
    //选择id
    query.select('.listbox').boundingClientRect(function(rect) {
      // console.log(rect.top)
      kelong.top = e.changedTouches[0].clientY - rect.top - 30
      that.setData({
        kelong: kelong,
        showkelong: true
      })
    }).exec();
  },
  dragMove: function(e) {
    var that = this
    var i = e.currentTarget.dataset.index
    var query = wx.createSelectorQuery();
    var kelong = that.data.kelong
    var listnum = that.data.optionList.length
    var optionList = that.data.optionList
    query.select('.listbox').boundingClientRect(function(rect) {
      kelong.top = e.changedTouches[0].clientY - rect.top - 30
      if(kelong.top < -60) {
        kelong.top = -60
      } else if (kelong.top > rect.height) {
        kelong.top = rect.height - 60
      }
      that.setData({
        kelong: kelong,
      })
    }).exec();
  },
  dragEnd: function(e) {
    var that = this
    var i = e.currentTarget.dataset.index
    var query = wx.createSelectorQuery();
    var kelong = that.data.kelong
    var listnum = that.data.optionList.length
    var optionList = that.data.optionList
    query.select('.listbox').boundingClientRect(function (rect) {
      kelong.top = e.changedTouches[0].clientY - rect.top - 30
      if(kelong.top<-20){
        wx.showModal({
          title: '删除提示',
          content: '确定要删除此条记录?',
          confirmColor:'#e4463b'
        })
      }
      var target = parseInt(kelong.top / 60)
      var replace = that.data.replace
      if (target >= 0) {
        replace.xt = optionList[target].xt
        replace.name = optionList[target].name
        replace.subname = optionList[target].subname
        optionList[target].xt = optionList[i].xt
        optionList[target].name = optionList[i].name
        optionList[target].subname = optionList[i].subname
        optionList[i].xt = replace.xt
        optionList[i].name = replace.name
        optionList[i].subname = replace.subname
      }
      that.setData({
        optionList: optionList,
        showkelong:false
      })
    }).exec();
  },
点赞 5
收藏
评论

13 个评论

  • Be your sun
    Be your sun
    2019-10-22

    可以稍微文字讲解一下思路吗?新手不太懂,谢谢哈

    2019-10-22
    赞同 2
    回复
  • Qd
    Qd
    05-26

    牛逼


    05-26
    赞同 1
    回复
  • 萌萌萌
    萌萌萌
    07-29

    可以试试用transform来实现,比top的性能会好一点。

    07-29
    赞同
    回复
  • 不才
    不才
    07-17

    优秀


    07-17
    赞同
    回复
  • 🍎Steven
    🍎Steven
    05-08

    完整的demo能发出来看看么?

    05-08
    赞同
    回复
  • 🍎Steven
    🍎Steven
    05-08

    整个demo链接有吗

    05-08
    赞同
    回复
  • 哈罗哈皮
    哈罗哈皮
    03-25

    你们手机使用这个拖拽不卡顿?

    03-25
    赞同
    回复
  • 花者不酷
    花者不酷
    2019-11-27

    感谢分享,功能实现了

    2019-11-27
    赞同
    回复
  • Dio.龙 
    Dio.龙 
    2019-08-22

    拖动的时候原列表对象应该隐藏。

    2019-08-22
    赞同
    回复
  • wwwwwwwwwwwwwwwwwwwwwwwwwwwwuJie
    wwwwwwwwwwwwwwwwwwwwwwwwwwwwuJie
    2019-08-01
    图片拖拽排序咧
    2019-08-01
    赞同
    回复 1
    • 大又元-Javey
      大又元-Javey
      2019-08-02
      是同样的思路,可以借鉴下。以后有机会我惠发出图片排序的code
      2019-08-02
      回复

正在加载...

登录 后发表内容