• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue element el-transfer增加拖拽功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能;
原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs

首先安装

 sudo npm i sortablejs --save-dev

html代码

  <template>
  <el-transfer ref="transfer" id="transfer" v-model="value" :data="data">
   <span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event,option)">{{ option.key }} - {{ option.label }}</span>
  </el-transfer>
</template>```

create

  <script>

   import Sortable from 'sortablejs'

   export default {
      data() {
        const generateData = _ => {
          const data = []; for (let i = 1; i <= 15; i++) {
            data.push({
              key: i,
              label: `备选项 ${i}`,
              disabled: i % 4 === 0 });
          } return data;
        }; return {
          data: generateData(),
          value: [1, 4],
          draggingKey : null }
      },
      mounted() {
        const transfer = this.$refs.transfer.$el
        const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
        const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
        const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]
        Sortable.create(rightEl,{
          onEnd: (evt) => {
            const {oldIndex,newIndex} = evt;
            const temp = this.value[oldIndex] 
            if (!temp || temp === 'undefined') {
              return
            }// 解决右边最后一项从右边拖左边,有undefined的问题
            this.$set(this.value,oldIndex,this.value[newIndex])  
            this.$set(this.value,newIndex,temp)
          }
        })
        const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]
        Sortable.create(leftEl,{
          onEnd: (evt) => {
            const {oldIndex,newIndex} = evt;
            const temp = this.data[oldIndex] 
            if (!temp || temp === 'undefined') {
              return
            } // 解决右边最后一项从右边拖左边,有undefined的问题
            this.$set(this.data,oldIndex,this.data[newIndex]) 
            this.$set(this.data,newIndex,temp)
          }
        })
        leftPanel.ondragover = (ev) => {
          ev.preventDefault()
        }
        leftPanel.ondrop = (ev) => {
          ev.preventDefault();
          const index = this.value.indexOf(this.draggingKey) if(index !== -1){ this.value.splice(index,1)
          }
        }
        rightPanel.ondragover = (ev) => {
          ev.preventDefault()
        }
        rightPanel.ondrop = (ev) => {
          ev.preventDefault();  if(this.value.indexOf(this.draggingKey) === -1){ this.value.push(this.draggingKey)
          }
        }
      },
      methods: {
        drag(ev,option) { this.draggingKey = option.key
        }
      }

    } 
</script>

到此这篇关于vue element el-transfer增加拖拽功能的文章就介绍到这了,更多相关element el-transfer拖拽内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
关于uniApp editor微信滑动问题发布时间:2022-02-05
下一篇:
react-native 实现购物车滑动删除效果的示例代码发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap