vue element el-transfer adds drag and drop function

The core asset management project requires el-transfer to add drag and drop sorting, and drag and drop functions between left and right up and down;
The original component does not support drag and drop. Here we need to use a third-party home-released component sortablejs

Install first

 sudo npm i sortablejs --save-dev

html code

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

create

  &lt;script&gt;

   import Sortable from 'sortablejs'

   export default {
      data() {
        const generateData = _ =&gt; {
          const data = []; for (let i = 1; i &lt;= 15; i++) {
            ({
              key: i,
              label: `Preparation options ${i}`,
              disabled: i % 4 === 0 });
          } return data;
        }; return {
          data: generateData(),
          value: [1, 4],
          draggingKey : null }
      },
      mounted() {
        const transfer = this.$.$el
        const leftPanel = ("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
        const rightPanel = ("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
        const rightEl = ("el-transfer-panel__list")[0]
        (rightEl,{
          onEnd: (evt) =&gt; {
            const {oldIndex,newIndex} = evt;
            const temp = [oldIndex] 
            if (!temp || temp === 'undefined') {
              return
            }// Solve the problem of undefined dragging the last item on the right from the left            this.$set(,oldIndex,[newIndex])  
            this.$set(,newIndex,temp)
          }
        })
        const leftEl = ("el-transfer-panel__list")[0]
        (leftEl,{
          onEnd: (evt) =&gt; {
            const {oldIndex,newIndex} = evt;
            const temp = [oldIndex] 
            if (!temp || temp === 'undefined') {
              return
            } // Solve the problem of undefined dragging the last item on the right from the left            this.$set(,oldIndex,[newIndex]) 
            this.$set(,newIndex,temp)
          }
        })
         = (ev) =&gt; {
          ()
        }
         = (ev) =&gt; {
          ();
          const index = () if(index !== -1){ (index,1)
          }
        }
         = (ev) =&gt; {
          ()
        }
         = (ev) =&gt; {
          ();  if(() === -1){ ()
          }
        }
      },
      methods: {
        drag(ev,option) {  = 
        }
      }

    } 
&lt;/script&gt;

This is the article about the addition of drag and drop function of vue element el-transfer. For more related element el-transfer drag and drop content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!