taro小程序拖拽效果源码

博客由来

晴空万里的情况下，产品看技术人员心情不错，于是开始提前布局了。
谦虚的向前端提了一个这样的需求，能不能实现拖拽的效果，优化一下排序的可操作性，‘不着急实现的’；
听到这，还能忍！必须实现一下！

效果图, 代码是原taro vue开发

以每一组数据顶部到合作顶部距离，计算排位顺序

https://v.qq.com/x/page/b3225uujvcn.html

<view class="listbox">
    <view
      v-if="showkelong"
      class="list kelong"
      :style="'top:'+kelong.top+'px'"
    >
      <view class="index">
        ?
      </view>
      <image
        src="@/asset/images/compass.png"
        class="xt"
      />
      <view class="info">
        <view class="name">
          {{ kelong.name }}
        </view>
        <view class="sub-name">
          {{ kelong.subname }}
        </view>
      </view>
      <image
        src="@/asset/images/compass.png"
        class="more"
      />
    </view>

    <view
      v-for="(item,index) in optionList"
      :key="index"
      class="list"
    >
      <view class="index">
        {{ index+1 }}
      </view>
      <image
        src="@/asset/images/compass.png"
        class="xt"
      />
      <view class="info">
        <view class="name">
          {{ item.name }}
        </view>
        <view class="sub-name">
          {{ item.subname }}
        </view>
      </view>
      <image
        src="@/asset/images/compass.png"
        class="more"
      />
      <view
        class="moreiconpl"
        :data-index="index"
        @touchStart="dragStart"
        @touchMove="dragMove"
        @touchEnd="dragEnd"
      />
    </view>
  </view>

optionList: [
    {
      xt: '@/asset/images/compass.png',
      name: '土地',
      subname: '土地好',
      xt: ''
    },
    {
      xt: '@/asset/images/compass.png',
      name: '蓝天',
      subname: '蓝天好',
      xt: ''
    },
    {
      xt: '@/asset/images/compass.png',
      name: '碧海',
      subname: '碧海好',
      xt: ''
    },
    {
      xt: '@/asset/images/compass.png',
      name: '天涯',
      subname: '天涯好',
      xt: ''
    }
  ],
  showkelong:false,
  kelong: {
    top: 0,
    xt: '',
    name: '',
    subname: ''
  },
  replace: {
    xt: '',
    name: '',
    subname: ''
  }

dragStart: function(e) {
      var that = this
      var kelong = that.kelong
      var i = e.currentTarget.dataset.index
      kelong.xt = this.optionList[i].xt
      kelong.name = this.optionList[i].name
      kelong.subname = this.optionList[i].subname

      var query = that.$taro.createSelectorQuery();
      //选择id
      query.select('.listbox').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function(rect){
        // res[0].top       // #the-id节点的上边界坐标
        // res[1].scrollTop // 显示区域的竖直滚动位置

        // console.log(rect)
        kelong.top = e.changedTouches[0].clientY - rect[0].top - 30
        
        that.kelong = kelong
        that.showkelong = true
      })
    },
    dragMove: function(e) {
      var that = this
      var i = e.currentTarget.dataset.index
      var query = that.$taro.createSelectorQuery();
      var kelong = that.kelong
      var listnum = that.optionList.length
      var optionList = that.optionList
      query.select('.listbox').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function(rect){
        kelong.top = e.changedTouches[0].clientY - rect[0].top - 30
        if(kelong.top < -60) {
          kelong.top = -60
        } else if (kelong.top > rect.height) {
          kelong.top = rect.height - 60
        }
        that.kelong = kelong
      })
    },
    dragEnd: function(e) {
      var that = this
      var i = e.currentTarget.dataset.index
      var query = that.$taro.createSelectorQuery();
      var kelong = that.kelong
      var listnum = that.optionList.length
      var optionList = that.optionList
      query.select('.listbox').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function(rect){
        kelong.top = e.changedTouches[0].clientY - rect[0].top
        if(kelong.top<-20){
          that.$taro.showModal({
            title: '删除提示',
            content: '确定要删除此条记录？',
            confirmColor:'#e4463b'
          })
        }
        var target = parseInt(kelong.top / 60)
        var replace = that.replace
        if (target >= 0 && target < optionList.length) {
          // console.log(target)
          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.optionList = optionList
        that.showkelong = false
      })
    },

.listbox{
  width: 750px;
  position: relative;
  .list{
    margin: 0 auto;
    display: flex;
    height: 100px;
    position: relative;
    .index{
      height: 100px;
      line-height: 100px;
      text-align: center;
      width: 50px;
      display: inline-block;
    }
    .xt{
      height: 80px;
      width: 80px;
      margin: auto 10px;
      display: inline-block;
    }
    .info{
      flex: 1;
    }
    .more{
      width: 50px;
      height: 50px;
      margin: auto 20px;
    }
    .moreiconpl{
      position: absolute;
      left: 0;
      top: 0;
      width: 750px;
      height: 100px;
    }
  }
  .kelong{
    position: absolute;
    width: 750px;
    left: 0;
    top: 0;
    z-index: 9;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 10px rgba(176, 176, 176, 0.29);
  }
}

防止界面被拖动

enablePullDownRefresh: false,
disableScroll: true