vue element el-transfer增加拖拽功能

芯资管项目要求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拖拽内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vue+abp微信扫码登录的实现代码示例
• 如何封装Vue Element的table表格组件
• vue+element table表格实现动态列筛选的示例代码
• vue element和nuxt的使用技巧分享
• vue+elementui通用弹窗的实现(新增+编辑)
• vue+element UI实现树形表格
• vue+elementUI动态增加表单项并添加验证的代码详解
• vue使用element-ui实现表单验证
• Vue Element前端应用开发之整合ABP框架的前端登录

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！