vue 要素 el-transfer にドラッグ機能を追加

 sudo npm i sortablejs --save-dev

  <テンプレート>
  <el-transfer ref="転送" id="転送" v-model="値" :data="データ">
   <span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event,option)">{{ option.key }} - {{ option.label }}</span>
  </el-transfer>
</テンプレート>```

  <スクリプト>

   'sortablejs' から Sortable をインポートします。

   エクスポートデフォルト{
      データ（） {
        const 生成データ = _ => {
          constデータ = []; for (let i = 1; i <= 15; i++) {
            データ.push({
              キー: i,
              ラベル: `オプション ${i}`,
              無効: i % 4 === 0 });
          } データを返します。
        }; 戻る {
          データ: generateData(),
          値: [1, 4],
          ドラッグキー: null }
      },
      マウント() {
        const 転送 = 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];
        定数 rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]
        ソート可能.create(rightEl,{
          onEnd: (イベント) => {
            const {古いインデックス、新しいインデックス} = evt;
            const temp = this.value[古いインデックス] 
            if (!temp || temp === 'undefined') {
              戻る
            }// 右端の最後の項目を右から左にドラッグしたときに undefined になる問題を解決します this.$set(this.value,oldIndex,this.value[newIndex])  
            this.$set(this.value,newIndex,temp)
          }
        })
        const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]
        ソート可能.create(leftEl,{
          onEnd: (イベント) => {
            const {古いインデックス、新しいインデックス} = evt;
            const temp = this.data[古いインデックス] 
            if (!temp || temp === 'undefined') {
              戻る
            } // 右端の最後の項目を右から左にドラッグしたときに undefined になる問題を解決します this.$set(this.data,oldIndex,this.data[newIndex]) 
            this.$set(this.data,newIndex,temp)
          }
        })
        左パネル.ondragover = (ev) => {
          ev.preventDefault()
        }
        左パネル.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)
          }
        }
      },
      メソッド: {
        ドラッグ(ev,option) { this.draggingKey = option.key
        }
      }

    } 
</スクリプト>