vue 拖拽组件分享 vue-draggable

image
最近, vue 项目中要实现 拖拽排序的效果, 搜索应用一下,发现 vue-draggable 这个组件非常好用,给大家介绍下。

vue-draggable

gif
官方示例的动图最能表示该组件的效果。

安装依赖

1
npm install vuedraggable sortablejs --save

基本使用

基本用法:

1
2
3
<draggable v-model="myArray" :options="{group:'people'}" @start="drag" @end="drop" :move="checkMove">
<div v-for="element in myArray">{{element.name}}</div>
</draggable>

vue引入方法:

1
2
3
4
5
6
7
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...

sortableJs

sortable 配置项

Vue Draggable 可以直接使用 Sortable 的配置项. options 里面配置即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var sortable = new Sortable(el, {
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
sort: true, // sorting inside list
delay: 0, // time in milliseconds to define when the sorting should start
disabled: false, // Disables the sortable if set to true.
store: null, // @see Store
animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
handle: ".my-handle", // Drag handle selector within list items
filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
draggable: ".item", // Specifies which items inside the element should be draggable
ghostClass: "sortable-ghost", // Class name for the drop placeholder
chosenClass: "sortable-chosen", // Class name for the chosen item
dragClass: "sortable-drag", // Class name for the dragging item
dataIdAttr: 'data-id',

forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in

fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px

setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
},

// Element is chosen
onChoose: function (/**Event*/evt) {
evt.oldIndex; // element index within parent
},

// Element dragging started
onStart: function (/**Event*/evt) {
evt.oldIndex; // element index within parent
},

// Element dragging ended
onEnd: function (/**Event*/evt) {
evt.oldIndex; // element's old index within parent
evt.newIndex; // element's new index within parent
},

// Element is dropped into the list from another list
onAdd: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
evt.from; // previous list
// + indexes from onEnd
},

// Changed sorting within list
onUpdate: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
// + indexes from onEnd
},

// Called by any change to the list (add / update / remove)
onSort: function (/**Event*/evt) {
// same properties as onUpdate
},

// Element is removed from the list into another list
onRemove: function (/**Event*/evt) {
// same properties as onUpdate
},

// Attempt to drag a filtered element
onFilter: function (/**Event*/evt) {
var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
},

// Event when you move an item in the list or between lists
onMove: function (/**Event*/evt, /**Event*/originalEvent) {
// Example: http://jsbin.com/tuyafe/1/edit?js,output
evt.dragged; // dragged HTMLElement
evt.draggedRect; // TextRectangle {left, top, right и bottom}
evt.related; // HTMLElement on which have guided
evt.relatedRect; // TextRectangle
originalEvent.clientY; // mouse position
// return false; — for cancel
},

// Called when creating a clone of element
onClone: function (/**Event*/evt) {
var origEl = evt.item;
var cloneEl = evt.clone;
}
});

注意事项

Vue Draggable 隐藏了 options 中的事件, 其中 OnXXX 事件,皆有 API 提供, 无需在 options 里面配置。

后记

如果 安卓微信浏览器中, 无法拖动排序或者只能拖动, 请升级到最新的 SortableJS 文件版本, 作者在 2019 年年初的 1.8.0 版本中修复了这个问题。

咸鱼也要有梦想,万一实现了呢
0%