vue elementel-transfer 드래그 기능 추가
3645 단어 elementel-transfer끌다
원래의 구성 요소는 드래그를 지원하지 않습니다. 여기는 제3자 탈택 구성 요소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 elementel-transfer의 드래그 기능 증가에 관한 이 글은 여기까지 소개되었습니다. 더 많은 관련 elementel-transfer 드래그 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
vue.js의 컴포넌트 컬렉션 "Element"를 사용하여 다중 선택을 구현합니다.멀티플 셀렉트란 간단하게 말하면 복수 선택 가능한 셀렉트 박스입니다. 의외로 고객이 요구하는 UI상 필요한 것이 많아, 지금까지도 몇번이나 요망에 응해 왔습니다. 대체로 jQuery의 멀티플 셀렉트를 사용하고 있었습...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.