<p align="center"><img width="140" src="https://oscimg.oschina.net/oscnet/logo.svg"></p> <h1 align="center">Vue.Draggable</h1>
Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.
Based on and offering all features of Sortable.js
[译]Vue组件(Vue.js 2.0)或directive(Vue.js 1.0)允许拖放以及与视图模型数组同步。
基于并提供Sortable.js的所有功能
Demo
Live Demos
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
Features
-
Full support of Sortable.js features:
- Supports touch devices
- Supports drag handles and selectable text
- Smart auto-scrolling
- Support drag and drop between different lists
- No jQuery dependency
-
Keeps in sync HTML and view model list
-
Compatible with Vue.js 2.0 transition-group
-
Cancellation support
-
Events reporting any changes when full control is needed
-
Reuse existing UI library components (such as vuetify, element, or vue material etc...) and make them draggable using
tag
andcomponentData
props -
[译]全面支持Sortable.js功能:
- 支持触摸设备
- 支持拖动手柄和可选文本
- 智能自动滚动
- 支持在不同列表之间拖放
- 没有jQuery依赖
-
与HTML和查看模型列表保持同步
-
与Vue.js 2.0过渡组兼容
-
支持取消
-
需要完全控制时,事件报告任何更改
-
重用现有的UI库组件(例如vuetify, element, 或 vue material等),并使用
tag
和componentData
props使其可拖动
Backers
<a href="https://flatlogic.com/admin-dashboards"> <img width="190" style="margin-top: 10px;" src="https://oscimg.oschina.net/oscnet/logo-d9e7751df5fddd11c911945a75b56bf72bcfe809a7f6dca0e32d7b407eacedae.svg"> </a>
Admin Dashboard Templates made with Vue, React and Angular.
Donate
Find this project useful? You can buy me a :coffee: or a :beer:
Installation
With npm or yarn
yarn add vuedraggable
npm i -S vuedraggable
Beware it is vuedraggable for Vue 2.0 and not vue-draggable which is for version 1.0
[译]请注意,对于Vue 2.0是vuedraggable,对于Vue 1.0则是vue-draggable
with direct link
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
For Vue.js 2.0
Use draggable component:
Typical use:
<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 file:
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...
With transition-group
:
<draggable v-model="myArray">
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>
Draggable component should directly wrap the draggable elements, or a transition-component
containing the draggable elements.
[译]可拖动组件应直接包装可拖动元素,或包含可拖动元素的transition-component
。
With footer slot:
<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>
With header slot:
<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>
With Vuex:
<draggable v-model="myList">
computed: {
myList: {
get() {
return this.$store.state.myList
},
set(value) {
this.$store.commit('updateList', value)
}
}
}
Props
value
Type: Array
<br>
Required: false
<br>
Default: null
Input array to draggable component. Typically same array as referenced by inner element v-for directive.<br>
This is the preferred way to use Vue.draggable as it is compatible with Vuex.<br>
It should not be used directly but only though the v-model
directive:<br>
[译]输入数组到可拖动组件。 通常与内部元素v-for指令引用的数组相同。<br> 这是使用Vue.draggable的首选方式,因为它与Vuex兼容。<br> 它不应直接使用,而只能通过v-model指令使用:
<draggable v-model="myArray">
list
Type: Array
<br>
Required: false
<br>
Default: null
Alternative to the value
prop, list is an array to be synchronized with drag-and-drop.<br>
The main difference is that list
prop is updated by draggable component using splice method, whereas value
is immutable.<br>
Do not use in conjunction with value prop.<br>
[译]list是value
prop的替代项,它是一个与拖放同步的数组。<br>
主要区别在于list
prop是通过可拖动组件使用拼接方法更新的,而value
是不可变的。<br>
不要与value
prop一起使用。
All sortable options
New in version 2.19
Sortable options can be set directly as vue.draggable props since version 2.19.
This means that all sortable option are valid sortable props with the notable exception of all the method starting by "on" as draggable component expose the same API via events.
kebab-case propery are supported: for example ghost-class
props will be converted to ghostClass
sortable option.
Example setting handle, sortable and a group option:
[译]从2.19版开始,可以将sortable options直接设置为vue.draggable的props。
这意味着所有sortable option都是有效的可排序props,除了所有以"on"开头的情况明显例外的方法,因为可拖动组件通过事件公开了相同的API。
支持kebab-case属性:例如,ghost-class
将转换为ghostClass
可排序选项。
设置句柄(handle),可排序(sortable)和组选项(group option)的示例:
<draggable v-model="list" handle=".handle" :group="{ name: 'people', pull: 'clone', put: false }" ghost-class="ghost" :sort="false" @change="log">
<!-- -->
</draggable>
tag
Type: String
<br>
Default: 'div'
HTML node type of the element that draggable component create as outer element for the included slot.<br> It is also possible to pass the name of vue component as element. In this case, draggable attribute will be passed to the create component.<br> See also componentData if you need to set props or event to the created component.
[译]可拖动组件将其创建为所包含插槽的外部元素的元素的HTML节点类型。<br> 也可以将vue组件的名称作为元素传递。 在这种情况下,可拖动属性将被传递用以创建组件。<br> 如果需要为创建的组件设置props或event,请参见componentData。
clone
Type: Function
<br>
Required: false
<br>
Default: (original) => { return original;}
<br>
Function called on the source component to clone element when clone option is true. The unique argument is the viewModel element to be cloned and the returned value is its cloned version.<br> By default vue.draggable reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it.
[译]当clone选项为true时,在源组件上调用的用于克隆元素的函数。 唯一参数是要克隆的viewModel元素,返回值是其克隆版本。<br> 默认情况下,vue.draggable重用viewModel元素,因此如果要克隆或深度克隆它,则必须使用此钩子(hook)。
move
Type: Function
<br>
Required: false
<br>
Default: null
<br>
If not null this function will be called in a similar way as Sortable onMove callback. Returning false will cancel the drag operation.
[译]如果不为null,则将以与Sortable onMove callback回调类似的方式调用此函数。 返回false将取消拖动操作。
function onMoveCallback(evt, originalEvent){
...
// return false; — for cancel
}
evt object has same property as Sortable onMove event, and 3 additional properties:
draggedContext
: context linked to dragged elementindex
: dragged element indexelement
: dragged element underlying view model elementfutureIndex
: potential index of the dragged element if the drop operation is accepted
relatedContext
: context linked to current drag operationindex
: target element indexelement
: target element view model elementlist
: target listcomponent
: target VueComponent
[译]evt对象具有与Sortable onMove event相同的属性,并具有3个其他属性:
draggedContext
:链接到拖动元素的上下文index
:拖动元素索引element
:拖动的元素,基础视图模型元素futureIndex
:如果接受放置操作,则拖动元素的潜在索引
relatedContext
:链接到当前拖动操作的上下文index
:目标元素索引element
:目标元素视图模型元素list
:目标列表component
:目标VueComponent
HTML:
<draggable :list="list" :move="checkMove">
javascript:
checkMove: function(evt){
return (evt.draggedContext.element.name!=='apple');
}
See complete example: Cancel.html, cancel.js
componentData
Type: Object
<br>
Required: false
<br>
Default: null
<br>
This props is used to pass additional information to child component declared by tag props.<br> Value:
props
: props to be passed to the child componentattrs
: attrs to be passed to the child componenton
: events to be subscribe in the child component
[译]该props用于将附加信息传递给tag props声明的子组件。 值:<br>
props
:传递给子组件的propsattrs
:要传递给子组件的attrson
:要在子组件中订阅的事件
Example (using element UI library):
<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
}
};
}
}
Events
-
Support for Sortable events:
start
,add
,remove
,update
,end
,choose
,unchoose
,sort
,filter
,clone
<br> Events are called whenever onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone are fired by Sortable.js with the same argument.<br> See here for referenceNote that SortableJS OnMove callback is mapped with the move prop
-
[译]支持可排序事件:
start
,add
,remove
,update
,end
,choose
,unchoose
,sort
,filter
,clone
<br> 每当使用相同参数的Sortable.js触发onStart,onAdd,onRemove,onUpdate,onEnd,onChoose,onUnchoose,onSort,onClone时,都会调用事件。<br> 请参阅此处以供参考请注意,SortableJS OnMove回调与move prop映射
HTML:
<draggable :list="list" @end="onEnd">
-
change event
change
event is triggered when list prop is not null and the corresponding array is altered due to drag-and-drop operation.<br> This event is called with one argument containing one of the following properties:added
: contains information of an element added to the arraynewIndex
: the index of the added elementelement
: the added element
removed
: contains information of an element removed from to the arrayoldIndex
: the index of the element before removeelement
: the removed element
moved
: contains information of an element moved within the arraynewIndex
: the current index of the moved elementoldIndex
: the old index of the moved elementelement
: the moved element
-
[译]变更事件
当列表属性不为null且由于拖放操作而更改了相应的数组时,将触发
change
事件。<br> 使用包含以下属性之一的一个参数调用此事件:added
:包含添加到数组中的元素的信息newIndex
:添加元素的索引element
:已添加的元素
removed
:包含从数组中删除的元素的信息oldIndex
:元素在删除之前的索引element
:已删除的元素
moved
:包含在数组中移动的元素的信息newIndex
:已移动元素的当前索引oldIndex
:已移动元素的旧索引element
:移动的元素
Slots
Limitation: neither header or footer slot works in conjunction with transition-group.
[译]限制:header或footer插槽都不能与transition-group一起使用。
Header
Use the header
slot to add none-draggable element inside the vuedraggable component.
Important: it should be used in conjunction with draggable option to tag draggable element.
Note that header slot will always be added before the default slot regardless its position in the template.
Ex:
[译]使用header
插槽在vuedraggable组件内添加不可拖动的元素。
重要提示:它应与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>
Footer
Use the footer
slot to add none-draggable element inside the vuedraggable component.
Important: it should be used in conjunction with draggable option to tag draggable elements.
Note that footer slot will always be added after the default slot regardless its position in the template.
Ex:
[译]使用footer
插槽在vuedraggable组件内添加不可拖动的元素。
重要提示:它应与draggable选项一起使用,以标记可拖动元素。
请注意,无论页脚插槽在模板中的位置如何,始终将其添加到默认插槽之后。
例如:
<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>
Gotchas
-
Vue.draggable children should always map the list or value prop using a v-for directive
-
Children elements inside v-for should be keyed as any element in Vue.js. Be carefull to provide revelant key values in particular:
- typically providing array index as keys won't work as key should be linked to the items content
- cloned elements should provide updated keys, it is doable using the clone props for example
-
[译]Vue.draggable子项应始终使用v-for指令映射list或value prop
-
v-for内的子元素应作为Vue.js中的任何元素进行键控。请特别注意提供实用的键值:
- 通常提供数组索引,因为键不起作用,因为键应该链接到项目内容
- 克隆的元素应提供更新的密钥,例如可以使用clone props来完成
Example
Full demo example
For Vue.js 1.0
</draggable></draggable></draggable></draggable>
来源:oschina
链接:https://my.oschina.net/yangyishe/blog/4393287