Vue.Draggable
v2.24.3
Vue 구성 요소(Vue.js 2.0) 또는 지시문(Vue.js 1.0)을 사용하면 드래그 앤 드롭 및 뷰 모델 배열과의 동기화가 가능합니다.
Sortable.js의 모든 기능을 기반으로 제공
vue.draggable.next를 참조하세요.
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tag 및 componentData 소품을 사용하여 드래그 가능하게 만듭니다. 후원자를 찾고 있습니다!
이 프로젝트가 유용하다고 생각하시나요? 나에게 녹이나 ?를 사주실 수 있어요.
yarn add vuedraggable
npm i -S vuedraggableVue 2.0에서는 vuedraggable이고 버전 1.0에서는 vue-draggable이 아닙니다.
< script src =" //cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js " > script >
< script src =" //cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js " > script >
< script src =" //cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js " > script >참조 예제 섹션
드래그 가능한 구성요소 사용:
< draggable v-model =" myArray " group =" people " @start =" drag=true " @end =" drag=false " >
< div v-for =" element in myArray " :key =" element.id " > {{element.name}} div >
draggable >.vue 파일:
import draggable from 'vuedraggable'
. . .
export default {
components : {
draggable ,
} ,
...transition-group 사용: < draggable v-model =" myArray " >
< transition-group >
< div v-for =" element in myArray " :key =" element.id " >
{{element.name}}
div >
transition-group >
draggable > 드래그 가능한 구성 요소는 드래그 가능한 요소 또는 드래그 가능한 요소를 포함하는 transition-component 직접 래핑해야 합니다.
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" footer " @click =" addPeople " > Add button >
draggable > < draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" header " @click =" addPeople " > Add button >
draggable > < draggable v-model =' myList ' > computed: {
myList : {
get ( ) {
return this . $store . state . myList
} ,
set ( value ) {
this . $store . commit ( 'updateList' , value )
}
}
} 유형: Array
필수: false
기본값: null
드래그 가능한 구성요소에 배열을 입력합니다. 일반적으로 내부 요소 v-for 지시문에서 참조하는 것과 동일한 배열입니다.
이는 Vuex와 호환되므로 Vue.draggable을 사용하는 데 선호되는 방법입니다.
직접 사용해서는 안 되며 v-model 지시문을 통해서만 사용해야 합니다.
< draggable v-model =" myArray " > 유형: Array
필수: false
기본값: null
value prop 대신 list는 드래그 앤 드롭으로 동기화할 배열입니다.
주요 차이점은 list prop은 splice 메서드를 사용하여 드래그 가능한 구성 요소에 의해 업데이트되는 반면 value 변경할 수 없다는 것입니다.
value prop과 함께 사용하지 마세요.
버전 2.19의 새로운 기능
버전 2.19부터 정렬 가능한 옵션을 vue.draggable props로 직접 설정할 수 있습니다.
이는 드래그 가능한 구성 요소가 이벤트를 통해 동일한 API를 노출하므로 "on"으로 시작하는 모든 메서드를 제외하고 모든 정렬 가능한 옵션이 유효한 정렬 가능한 소품임을 의미합니다.
케밥 케이스 속성이 지원됩니다. 예를 들어 ghost-class 소품은 ghostClass 정렬 가능 옵션으로 변환됩니다.
예제 설정 핸들, 정렬 가능 및 그룹 옵션:
< draggable
v-model =" list "
handle =" .handle "
:group =" { name: 'people', pull: 'clone', put: false } "
ghost-class =" ghost "
:sort =" false "
@change =" log "
>
draggable > 유형: String
기본값: 'div'
드래그 가능한 구성요소가 포함된 슬롯의 외부 요소로 생성하는 요소의 HTML 노드 유형입니다.
vue 구성 요소의 이름을 요소로 전달할 수도 있습니다. 이 경우 draggable 속성이 create 구성 요소에 전달됩니다.
생성된 구성 요소에 소품이나 이벤트를 설정해야 하는 경우 구성 요소 데이터도 참조하세요.
유형: Function
필수: false
기본값: (original) => { return original;}
복제 옵션이 true인 경우 요소를 복제하기 위해 소스 구성 요소에서 호출되는 함수입니다. 고유한 인수는 복제할 viewModel 요소이고 반환된 값은 복제된 버전입니다.
기본적으로 vue.draggable은 viewModel 요소를 재사용하므로 이를 복제하거나 완전 복제하려면 이 후크를 사용해야 합니다.
유형: Function
필수: false
기본값: null
null이 아닌 경우 이 함수는 Sortable onMove 콜백과 비슷한 방식으로 호출됩니다. false를 반환하면 드래그 작업이 취소됩니다.
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}evt 객체에는 Sortable onMove 이벤트와 동일한 속성과 3개의 추가 속성이 있습니다.
draggedContext : 드래그된 요소에 연결된 컨텍스트index : 드래그된 요소 인덱스element : 드래그된 요소 기본 뷰 모델 요소futureIndex : 드롭 작업이 허용되는 경우 드래그된 요소의 잠재적 인덱스relatedContext : 현재 드래그 작업에 연결된 컨텍스트index : 대상 요소 인덱스element : 대상 요소 뷰 모델 요소list : 대상 목록component : 대상 VueComponentHTML:
< draggable :list =" list " :move =" checkMove " >자바스크립트:
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}전체 예 보기: Cancel.html, cancel.js
유형: Object
필수: false
기본값: null
이 props는 태그 props에 의해 선언된 하위 구성 요소에 추가 정보를 전달하는 데 사용됩니다.
값:
props : 자식 컴포넌트에 전달할 propsattrs : 자식 구성 요소에 전달될 attrson : 하위 구성 요소에서 구독할 이벤트예(요소 UI 라이브러리 사용):
< draggable tag =" el-collapse " :list =" list " :component-data =" getComponentData() " >
< el-collapse-item v-for =" e in list " :title =" e.title " :name =" e.name " :key =" e.name " >
< div > {{e.description}} div >
el-collapse-item >
draggable > methods: {
handleChange ( ) {
console . log ( 'changed' ) ;
} ,
inputChanged ( value ) {
this . activeNames = value ;
} ,
getComponentData ( ) {
return {
on : {
change : this . handleChange ,
input : this . inputChanged
} ,
attrs : {
wrap : true
} ,
props : {
value : this . activeNames
}
} ;
}
}정렬 가능한 이벤트 지원:
start , add , remove , update , end , choose , 선택 unchoose , sort , filter , clone
onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone이 동일한 인수를 사용하여 Sortable.js에 의해 실행될 때마다 이벤트가 호출됩니다.
참고로 여기를 참조하세요
SortableJS OnMove 콜백은 move 속성과 매핑됩니다.
HTML:
< draggable :list =" list " @end =" onEnd " >이벤트 변경
list prop이 null이 아니고 드래그 앤 드롭 작업으로 인해 해당 배열이 변경되면 change 이벤트가 트리거됩니다.
이 이벤트는 다음 속성 중 하나를 포함하는 하나의 인수로 호출됩니다.
added : 배열에 추가된 요소의 정보를 담고 있습니다.newIndex : 추가된 요소의 인덱스element : 추가된 요소removed : 배열에서 제거된 요소의 정보를 포함합니다.oldIndex : 제거 전 요소의 인덱스element : 제거된 요소moved : 배열 내에서 이동된 요소의 정보를 포함합니다.newIndex : 이동된 요소의 현재 인덱스oldIndex : 이동된 요소의 이전 인덱스element : 이동된 요소제한 사항: 머리글이나 바닥글 슬롯은 전환 그룹과 함께 작동하지 않습니다.
vuedraggable 구성 요소 내에 드래그할 수 없는 요소를 추가하려면 header 슬롯을 사용하세요. 중요: 드래그 가능한 요소에 태그를 지정하려면 드래그 가능한 옵션과 함께 사용해야 합니다. 헤더 슬롯은 템플릿에서의 위치에 관계없이 항상 기본 슬롯 앞에 추가됩니다. 전:
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" header " @click =" addPeople " > Add button >
draggable > vuedraggable 구성 요소 내부에 드래그할 수 없는 요소를 추가하려면 footer 슬롯을 사용하세요. 중요: 드래그 가능한 요소에 태그를 지정하려면 드래그 가능한 옵션과 함께 사용해야 합니다. 바닥글 슬롯은 템플릿에서의 위치에 관계없이 항상 기본 슬롯 뒤에 추가됩니다. 전:
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" footer " @click =" addPeople " > Add button >
draggable >Vue.draggable 하위 항목은 항상 v-for 지시어를 사용하여 목록이나 값 속성을 매핑해야 합니다.
v-for 내부의 하위 요소는 Vue.js의 모든 요소로 입력되어야 합니다. 특히 관련 키 값을 제공하는 데 주의하세요.
드래그 가능한 예
여기를 참조하세요
