Vue-Element el-transfer fügt Drag-Funktion hinzu

 sudo npm i sortablejs --save-dev

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

  <Skript>

   Sortable aus „sortablejs“ importieren

   Standard exportieren {
      Daten() {
        const generateData = _ => {
          const data = []; für (let i = 1; i <= 15; i++) {
            Daten.push({
              Taste: i,
              Bezeichnung: `Option ${i}`,
              deaktiviert: i % 4 === 0 });
          } Daten zurückgeben;
        }; zurückkehren {
          Daten: generateData(),
          Wert: [1, 4],
          draggingKey : null }
      },
      montiert() {
        const transfer = dies.$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(rechtsEl,{
          am Ende: (evt) => {
            const {alterIndex,neuerIndex} = evt;
            const temp = this.value[alterIndex] 
            wenn (!temp || temp === 'undefiniert') {
              zurückkehren
            }//Lösen Sie das Problem der undefinierten Angabe, wenn das letzte Element rechts von rechts nach links gezogen wird. this.$set(this.value,oldIndex,this.value[newIndex])  
            dies.$set(diesen.Wert,neuerIndex,temp)
          }
        })
        const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]
        Sortable.create(leftEl,{
          am Ende: (evt) => {
            const {alterIndex,neuerIndex} = evt;
            const temp = this.data[alterIndex] 
            wenn (!temp || temp === 'undefiniert') {
              zurückkehren
            } //Lösen Sie das Problem der undefinierten Angabe, wenn das letzte Element rechts von rechts nach links gezogen wird. this.$set(this.data,oldIndex,this.data[newIndex]) 
            dies.$set(diese.daten,neuerIndex,temp)
          }
        })
        leftPanel.ondragover = (ev) => {
          ev.preventDefault()
        }
        leftPanel.ondrop = (ev) => {
          ev.preventDefault();
          const index = dieser.Wert.indexOf(dieser.draggingKey) wenn(index !== -1){ dieser.Wert.splice(index,1)
          }
        }
        rightPanel.ondragover = (ev) => {
          ev.preventDefault()
        }
        rightPanel.ondrop = (ev) => {
          ev.preventDefault(); wenn(dieser.Wert.indexOf(dieser.draggingKey) === -1){ dieser.Wert.push(dieser.draggingKey)
          }
        }
      },
      Methoden: {
        ziehen(ev,option) { diese.draggingKey = option.key
        }
      }

    } 
</Skript>