Vue.Draggable\u5b66\u4e60\u603b\u7ed3 Draggable\u4e3a\u57fa\u4e8eSortable.js\u7684vue\u7ec4\u4ef6\uff0c\u7528\u4ee5\u5b9e\u73b0\u62d6\u62fd\u529f\u80fd\u3002<\/p>\n\n\n\n
\u7279\u6027 \u652f\u6301\u89e6\u6478\u8bbe\u5907 \u652f\u6301\u62d6\u62fd\u548c\u9009\u62e9\u6587\u672c \u652f\u6301\u667a\u80fd\u6eda\u52a8 \u652f\u6301\u4e0d\u540c\u5217\u8868\u4e4b\u95f4\u7684\u62d6\u62fd \u4e0d\u4ee5jQuery\u4e3a\u57fa\u7840 \u548c\u89c6\u56fe\u6a21\u578b\u540c\u6b65\u5237\u65b0 \u548cvue2\u7684\u56fd\u5ea6\u52a8\u753b\u517c\u5bb9 \u652f\u6301\u64a4\u9500\u64cd\u4f5c \u5f53\u9700\u8981\u5b8c\u5168\u63a7\u5236\u65f6\uff0c\u53ef\u4ee5\u629b\u51fa\u6240\u6709\u53d8\u5316 \u53ef\u4ee5\u548c\u73b0\u6709\u7684UI\u7ec4\u4ef6\u517c\u5bb9 \u5b89\u88c5 npm install vuedraggable 1 \u5f15\u5165 import draggable from ‘vuedraggable’ 1 \u57fa\u7840\u7528\u6cd5 \u5b9a\u4e49\u4e00\u4e2ajson\u4e32 list\uff0c\u5b9e\u73b0\u5b83\u7684\u62d6\u62fd\u6392\u5e8f\u3002<\/p>\n\n\n\n
<template>
<div>
<!-- \u8c03\u7528\u7ec4\u4ef6 -->
<draggable element=\"ul\" v-model=\"list\">
<li v-for=\"item in list\">{{item.name}}<\/li>
<\/draggable>
<!-- \u8f93\u51falist\u6570\u636e -->
{{list}}
<\/div>
<\/template>
<script>
\/\/ \u5f15\u5165\u62d6\u62fd\u7ec4\u4ef6
import draggable from 'vuedraggable'
export default {
name: 'demo',
components: {
\/\/\u8c03\u7528\u7ec4\u4ef6
draggable,
},
data () {
return {
list:[
{
id: 1,
name: 'a'
},
{
id: 2,
name: 'b'
},
{
id: 3,
name: 'c'
},
{
id: 4,
name: 'd'
},
{
id: 5,
name: 'e'
},
{
id: 6,
name: 'f'
},
]
}
<\/script><\/pre>\n\n\n\n\u5c5e\u6027<\/h1>\n\n\n\n
value<\/h2>\n\n\n\n
Array\uff0c\u975e\u5fc5\u987b\uff0c\u9ed8\u8ba4\u4e3anull<\/h3>\n\n\n\n
\u7528\u4e8e\u5b9e\u73b0\u62d6\u62fd\u7684list\uff0c\u901a\u5e38\u548c\u5185\u90e8v-for\u5faa\u73af\u7684\u6570\u7ec4\u4e3a\u540c\u4e00\u6570\u7ec4\u3002 \u6700\u597d\u4f7f\u7528vuex\u6765\u5b9e\u73b0\u4f20\u5165\u3002 \u4e0d\u662f\u76f4\u63a5\u4f7f\u7528\uff0c\u800c\u662f\u901a\u8fc7v-model\u5f15\u5165\u3002<\/p><\/blockquote>\n\n\n\n
<draggable v-model=”myArray”><\/p>\n\n\n\n
list<\/h2>\n\n\n\n
Array\uff0c\u975e\u5fc5\u987b\uff0c\u9ed8\u8ba4\u4e3anull<\/h3>\n\n\n\n
\u5c31\u662fvalue\u7684\u66ff\u4ee3\u54c1\u3002 \u548cv-model\u4e0d\u80fd\u5171\u7528 \u4ece\u8868\u73b0\u4e0a\u6ca1\u6709\u770b\u51fa\u4e0d\u540c<\/p><\/blockquote>\n\n\n\n
element<\/h2>\n\n\n\n
String\uff0c\u9ed8\u8ba4div<\/h3>\n\n\n\n
\u5c31\u662f<draggable>\u6807\u7b7e\u5728\u6e32\u67d3\u540e\u5c55\u73b0\u51fa\u6765\u7684\u6807\u7b7e\u7c7b\u578b \u4e5f\u662f\u5305\u542b\u62d6\u52a8\u5217\u8868\u548c\u63d2\u69fd\u7684\u5916\u90e8\u6807\u7b7e \u53ef\u4ee5\u7528\u6765\u517c\u5bb9UI\u7ec4\u4ef6<\/p><\/blockquote>\n\n\n\n
options<\/h2>\n\n\n\n
Object<\/h3>\n\n\n\n
\u914d\u7f6e\u9879<\/p>\n\n\n\n
- group: string or array \u5206\u7ec4\u7528\u7684\uff0c\u540c\u4e00\u7ec4\u7684\u4e0d\u540clist\u53ef\u4ee5\u76f8\u4e92\u62d6\u52a8<\/li>
- sort: boolean \u5b9a\u4e49\u662f\u5426\u53ef\u4ee5\u62d6\u62fd<\/li>
- delay:number \u5b9a\u4e49\u9f20\u6807\u9009\u4e2d\u5217\u8868\u5355\u5143\u53ef\u4ee5\u5f00\u59cb\u62d6\u52a8\u7684\u5ef6\u8fdf\u65f6\u95f4<\/li>
- touchStartThreshold:number (\u4e0d\u6e05\u695a)<\/li>
- disabled: boolean \u5b9a\u4e49\u662f\u5426\u6b64sortable\u5bf9\u8c61\u662f\u5426\u53ef\u7528\uff0c\u4e3atrue\u65f6sortable\u5bf9\u8c61\u4e0d\u80fd\u62d6\u653e\u6392\u5e8f\u7b49\u529f\u80fd<\/li>
- store:<\/li>
- animation: umber \u5355\u4f4d:ms \u52a8\u753b\u65f6\u95f4<\/li>
- handle: selector \u683c\u5f0f\u4e3a\u7b80\u5355css\u9009\u62e9\u5668\u7684\u5b57\u7b26\u4e32\uff0c\u4f7f\u5217\u8868\u5355\u5143\u4e2d\u7b26\u5408\u9009\u62e9\u5668\u7684\u5143\u7d20\u6210\u4e3a\u62d6\u52a8\u7684\u624b\u67c4\uff0c\u53ea\u6709\u6309\u4f4f\u62d6\u52a8\u624b\u67c4\u624d\u80fd\u4f7f\u5217\u8868\u5355\u5143\u8fdb\u884c\u62d6\u52a8<\/li>
- filter: selector \u683c\u5f0f\u4e3a\u7b80\u5355css\u9009\u62e9\u5668\u7684\u5b57\u7b26\u4e32\uff0c\u5b9a\u4e49\u54ea\u4e9b\u5217\u8868\u5355\u5143\u4e0d\u80fd\u8fdb\u884c\u62d6\u653e\uff0c\u53ef\u8bbe\u7f6e\u4e3a\u591a\u4e2a\u9009\u62e9\u5668\uff0c\u4e2d\u95f4\u7528\u201c\uff0c\u201d\u5206\u9694<\/li>
- preventOnFilter: \u5f53\u62d6\u52a8filter\u65f6\u662f\u5426\u89e6\u53d1event.preventDefault()\u9ed8\u8ba4\u89e6\u53d1<\/li>
- draggable: selector \u683c\u5f0f\u4e3a\u7b80\u5355css\u9009\u62e9\u5668\u7684\u5b57\u7b26\u4e32\uff0c\u5b9a\u4e49\u54ea\u4e9b\u5217\u8868\u5355\u5143\u53ef\u4ee5\u8fdb\u884c\u62d6\u653e<\/li>
- ghostClass: selector \u683c\u5f0f\u4e3a\u7b80\u5355css\u9009\u62e9\u5668\u7684\u5b57\u7b26\u4e32\uff0c\u5f53\u62d6\u52a8\u5217\u8868\u5355\u5143\u65f6\u4f1a\u751f\u6210\u4e00\u4e2a\u526f\u672c\u4f5c\u4e3a\u5f71\u5b50\u5355\u5143\u6765\u6a21\u62df\u88ab\u62d6\u52a8\u5355\u5143\u6392\u5e8f\u7684\u60c5\u51b5\uff0c\u6b64\u914d\u7f6e\u9879\u5c31\u662f\u6765\u7ed9\u8fd9\u4e2a\u5f71\u5b50\u5355\u5143\u6dfb\u52a0\u4e00\u4e2aclass\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\u6765\u7ed9\u5f71\u5b50\u5143\u7d20\u8fdb\u884c\u7f16\u8f91\u6837\u5f0f<\/li>
- chosenClass: selector \u683c\u5f0f\u4e3a\u7b80\u5355css\u9009\u62e9\u5668\u7684\u5b57\u7b26\u4e32\uff0c\u76ee\u6807\u88ab\u9009\u4e2d\u65f6\u6dfb\u52a0<\/li>
- dragClass:selector \u683c\u5f0f\u4e3a\u7b80\u5355css\u9009\u62e9\u5668\u7684\u5b57\u7b26\u4e32\uff0c\u76ee\u6807\u62d6\u52a8\u8fc7\u7a0b\u4e2d\u6dfb\u52a0<\/li>
- forceFallback: boolean \u5982\u679c\u8bbe\u7f6e\u4e3atrue\u65f6\uff0c\u5c06\u4e0d\u4f7f\u7528\u539f\u751f\u7684html5\u7684\u62d6\u653e\uff0c\u53ef\u4ee5\u4fee\u6539\u4e00\u4e9b\u62d6\u653e\u4e2d\u5143\u7d20\u7684\u6837\u5f0f\u7b49<\/li>
- fallbackClass\uff1a string \u5f53forceFallback\u8bbe\u7f6e\u4e3atrue\u65f6\uff0c\u62d6\u653e\u8fc7\u7a0b\u4e2d\u9f20\u6807\u9644\u7740\u5355\u5143\u7684\u6837\u5f0f<\/li>
- dataIdAttr\uff1a data-id<\/li>
- scroll\uff1aboolean\u5f53\u6392\u5e8f\u7684\u5bb9\u5668\u662f\u4e2a\u53ef\u6eda\u52a8\u7684\u533a\u57df\uff0c\u62d6\u653e\u53ef\u4ee5\u5f15\u8d77\u533a\u57df\u6eda\u52a8<\/li>
- scrollFn\uff1afunction(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { \u2026 } \u7528\u4e8e\u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u7684\u9002\u914d<\/li>
- scrollSensitivity: number \u5c31\u662f\u9f20\u6807\u9760\u8fd1\u8fb9\u7f18\u591a\u8fdc\u5f00\u59cb\u6eda\u52a8\u9ed8\u8ba430<\/li>
- scrollSpeed: number \u6eda\u52a8\u901f\u5ea6<\/li><\/ul>\n\n\n\n
\u51fd\u6570\u914d\u7f6e<\/p>\n\n\n\n
- setData: \u8bbe\u7f6e\u503c\u65f6\u7684\u56de\u8c03\u51fd\u6570<\/li>
- onChoose: \u9009\u62e9\u5355\u5143\u65f6\u7684\u56de\u8c03\u51fd\u6570<\/li>
- onStart: \u5f00\u59cb\u62d6\u52a8\u65f6\u7684\u56de\u8c03\u51fd\u6570<\/li>
- onEnd: \u62d6\u52a8\u7ed3\u675f\u65f6\u7684\u56de\u8c03\u51fd\u6570<\/li>
- onAdd: \u6dfb\u52a0\u5355\u5143\u65f6\u7684\u56de\u8c03\u51fd\u6570<\/li>
- onUpdate: \u6392\u5e8f\u53d1\u751f\u53d8\u5316\u65f6\u7684\u56de\u8c03\u51fd\u6570<\/li>
- onRemove: \u5355\u5143\u88ab\u79fb\u52a8\u5230\u53e6\u4e00\u4e2a\u5217\u8868\u65f6\u7684\u56de\u8c03\u51fd\u6570<\/li>
- onFilter: \u5c1d\u8bd5\u9009\u62e9\u4e00\u4e2a\u88abfilter\u8fc7\u6ee4\u7684\u5355\u5143\u7684\u56de\u8c03\u51fd\u6570<\/li>
- onMove: \u79fb\u52a8\u5355\u5143\u65f6\u7684\u56de\u8c03\u51fd\u6570<\/li>
- onClone: clone\u65f6\u7684\u56de\u8c03\u51fd\u6570<\/li>
- \u4ee5\u4e0a\u51fd\u6570\u5bf9\u8c61\u7684\u5c5e\u6027\uff1a
- to: \u79fb\u52a8\u5230\u7684\u5217\u8868\u7684\u5bb9\u5668<\/li>
- from\uff1a\u6765\u6e90\u5217\u8868\u5bb9\u5668<\/li>
- item: \u88ab\u79fb\u52a8\u7684\u5355\u5143<\/li>
- clone: \u526f\u672c\u7684\u5355\u5143<\/li>
- oldIndex\uff1a\u79fb\u52a8\u524d\u7684\u5e8f\u53f7<\/li><\/ul><\/li><\/ul>\n\n\n\n
clone<\/h2>\n\n\n\n
function,\u9ed8\u8ba4\u503c: \u65e0\u5904\u7406<\/h3>\n\n\n\n
- \u8fd9\u4e00\u9879\u8981\u914d\u5408\u7740
options<\/code>\u7684group<\/code>\u9879\u7684pull<\/code>\u9879\u5904\u7406\uff0c\u5f53pull:'clone<\/code>\u65f6\u7684\u62d6\u62fd\u7684\u56de\u8c03\u51fd\u6570\u2019<\/li>- \u5c31\u662f\u514b\u9686\u7684\u610f\u601d\u3002<\/li>
- \u53ef\u4ee5\u7406\u89e3\u4e3a\u6b63\u5e38\u7684\u62d6\u62fd\u53d8\u6210\u4e86\u590d\u5236<\/li>
- \u5f53\u4e3a
true<\/code>\u65f6\u514b\u9686<\/li><\/ul>\n\n\n\nmove<\/h2>\n\n\n\n
function,\u9ed8\u8ba4\u503c:null<\/h3>\n\n\n\n
- \u5c31\u662f\u62d6\u62fd\u9879\u65f6\u8c03\u7528\u7684\u51fd\u6570<\/li>
- \u7528\u6765\u786e\u5b9a\u62d6\u62fd\u662f\u5426\u751f\u6548<\/li>
- \u8fd4\u56denull\u65f6\u53ef\u4ee5\u751f\u6548<\/li>
- \u53ef\u4ee5\u901a\u8fc7\u51fd\u6570\u5224\u65ad<\/li>
- \u6709\u4e00\u4e2a\u53c2\u6570:evt
- evt\u4e3aobject<\/li>
- draggedContext: \u88ab\u62d6\u62fd\u5143\u7d20\u7684\u4e0a\u4e0b\u6587
- index:\u62d6\u62fd\u5143\u7d20\u7684\u6307\u9488<\/li>
- element: \u62d6\u62fd\u6570\u636e\u672c\u8eab<\/li>
- futureIndex: \u62d6\u52a8\u540e\u7684index<\/li><\/ul><\/li>
- relatedContext: \u62d6\u5165\u533a\u57df\u7684\u4e0a\u4e0b\u6587
- index: \u76ee\u6807\u5143\u7d20\u7684index<\/li>
- element:\u76ee\u6807\u6570\u636e\u672c\u8eab<\/li>
- list: \u62d6\u5165\u7684\u5217\u8868<\/li>
- component:\u76ee\u6807\u7ec4\u4ef6 <\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n
<draggable element=\"ul\" v-model=\"list\" :move='allow'>
...
methods: {
allow(evt) {
console.log(evt.draggedContext.index)
console.log(evt.draggedContext.element)
console.log(evt.draggedContext.futureIndex)
console.log(evt.relatedContext.index)
console.log(evt.relatedContext.element)
console.log(evt.relatedContext.list)
console.log(evt.relatedContext.component)
return (evt.draggedContext.element.name!== 'b')
}
}<\/pre>\n\n\n\ncomponentData<\/h2>\n\n\n\n
Object,\u9ed8\u8ba4\u503c:null<\/h3>\n\n\n\n
- \u7528\u6765\u7ed3\u5408UI\u7ec4\u4ef6\u7684\uff0c\u53ef\u4ee5\u7406\u89e3\u4e3a\u4ee3\u7406\u4e86UI\u7ec4\u4ef6\u7684\u5b9a\u5236\u4fe1\u606f<\/li>
- \u5305\u542b\u4e24\u9879:props\u548con
- props\u7528\u6765\u4ee3\u7406UI\u7ec4\u4ef6\u9700\u8981\u7ed1\u5b9a\u7684\u5c5e\u6027\uff08:\uff09<\/li>
- on\u7528\u6765\u4ee3\u7406UI\u7ec4\u4ef6\u9700\u8981\u7ed1\u5b9a\u7684\u4e8b\u4ef6\uff08@\uff09<\/li><\/ul><\/li><\/ul>\n\n\n\n
<draggable element=\"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><\/pre>\n\n\n\nmethods: {
handleChange() {
console.log('changed');
},
inputChanged(value) {
this.activeNames = value;
},
getComponentData() {
return {
on: {
change: this.handleChange,
input: this.inputChanged
},
props: {
value: this.activeNames
}
};
}
}<\/pre>\n\n\n\n\u4e8b\u4ef6<\/h1>\n\n\n\n
\u6709\u4ee5\u4e0b\u51e0\u79cd<\/h3>\n\n\n\n
start, add, remove, update, end, choose, sort, filter, clone<\/p><\/blockquote>\n\n\n\n
\u53c2\u6570\u5e26\u6709\u5982\u4e0b\u5c5e\u6027\uff1a<\/p>\n\n\n\n
- add: \u5305\u542b\u88ab\u6dfb\u52a0\u5230\u5217\u8868\u7684\u5143\u7d20
- newIndex: \u6dfb\u52a0\u540e\u7684\u65b0\u7d22\u5f15<\/li>
- element: \u88ab\u6dfb\u52a0\u7684\u5143\u7d20<\/li><\/ul><\/li>
- removed: \u4ece\u5217\u8868\u4e2d\u79fb\u9664\u7684\u5143\u7d20
- oldIndex: \u79fb\u9664\u524d\u7684\u7d22\u5f15<\/li>
- element: \u88ab\u79fb\u9664\u7684\u5143\u7d20<\/li><\/ul><\/li>
- moved\uff1a\u5185\u90e8\u79fb\u52a8\u7684
- newIndex: \u6539\u53d8\u540e\u7684\u7d22\u5f15<\/li>
- oldIndex: \u6539\u53d8\u524d\u7684\u7d22\u5f15<\/li>
- element: \u88ab\u79fb\u52a8\u7684\u5143\u7d20<\/li><\/ul><\/li><\/ul>\n\n\n\n
\u63d2\u69fd<\/h1>\n\n\n\n
\u63d0\u4f9b\u4e00\u4e2afooter\u63d2\u69fd\uff0c\u5728\u6392\u5e8f\u5217\u8868\u4e4b\u4e0b\u3002 \u6c38\u8fdc\u4f4d\u4e8e\u6700\u4e0b\u65b9\u3002<\/p>\n\n\n\n
<draggable v-model=\"myArray\" :options=\"{draggable:'.item'}\">
<div v-for=\"element in myArray\" :key=\"element.id\" class=\"item\">
{{element.name}}
<\/div>
<button slot=\"footer\" @click=\"addPeople\">Add<\/button>
<\/draggable><\/pre>\n\n\n\n