前言
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。拖顶的数据和data里的数据为双向绑定 ，在界面变的时候data中的数据也在跟着变化，插件的GitHub介绍地址
vuedraggable参数详解
安装
yarn add vuedraggable
npm i -S vuedraggable
引入
import draggable from 'vuedraggable'
使用
<template>
<div class="main">
排序
<div>
<draggable
v-model="groups"
@chang="change"
@start="start"
@end="end"
:move="move"
>
<!-- <transition-group> -->
<div v-for="(item, index) in groups" :key="index">item {
{
item }}</div>
<!-- </transition-group> -->
</draggable>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "HelloWorld",
components: {
draggable,
},
data() {
return {
groups: [1, 2, 3, 4, 5],
};
},
methods: {
change(event) {
console.log("change", event);
},
start(event) {
console.log("start", event);
},
end(event) {
console.log("end", event, this.groups);
},
move(event, orgin) {
console.log("move", event, orgin);
},
},
};
</script>
常用配置参数
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
sort: true, // 内部排序列表
delay: 0, // 以毫秒为单位定义排序何时开始。
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
disabled: false, // 如果设置为真，则禁用sortable。
store: null, // @see Store
animation: 150, // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
handle: ".my-handle", // 在列表项中拖动句柄选择器。
filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数)
preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
draggable: ".item", // 指定元素中的哪些项应该是可拖动的。
ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。
chosenClass: "sortable-chosen", // 设置被选中的元素的class
dragClass: "sortable-drag", //拖动元素的class。
dataIdAttr: 'data-id',
forceFallback: false, // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响）
fallbackClass: "sortable-fallback", // 使用forceFallback时克隆的DOM元素的类名。
fallbackOnBody: false, // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级）
fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) {
... }, // 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
事件
//evt里面有两个值，一个evt.added 和evt.removed 可以分别知道移动元素的ID和删除元素的ID
change: function (evt) {
console.log(evt)
},
//start ,end ,add,update, sort, remove 得到的都差不多
start: function (evt) {
console.log(evt)
},
end: function (evt) {
console.log(evt)
evt.item //可以知道拖动的本身
evt.to // 可以知道拖动的目标列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖动前的位置
evt.newIndex // 可以知道拖动后的位置
},
move: function (evt, originalEvent) {
console.log(evt)
console.log(originalEvent) //鼠标位置
}
在来个完整的,带动画拖拽的例子,想知道效果如何,请自己cv下来运行就行啦,动态的图不太会搞
<template>
<div class="container">
<h3>Draggable</h3>
<draggable tag="ul"
:list="list"
v-bind="dragOptions"
class="list-group"
handle=".handle"
@start="drag = true"
@end="drag = false">
<transition-group type="transition"
:name="!drag ? 'flip-list' : null">
<li class="list-group-item"
v-for="(element, idx) in list"
:key="element.name">
<span class="handle">拖</span>
<span class="text">{
{
element.name }} </span>
<span class="close"
@click="removeAt(idx)">删</span>
</li>
</transition-group>
</draggable>
<a-button type="danger" class="btn btn-secondary button"
@click="add">新增</a-button>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "draggable-template",
components: {
draggable
},
data () {
return {
list: [
{
name: "John0", text: "", id: 0 },
{
name: "Joao1", text: "", id: 1 },
{
name: "Jean2", text: "", id: 2 },
{
name: "Jean3", text: "", id: 3 },
{
name: "Jean4", text: "", id: 4 }
],
drag: false
};
},
computed: {
dragOptions () {
return {
animation: 200, // 动画时间
disabled: false, // false可拖拽，true不可拖拽
group: "description",
ghostClass: "ghost"
};
}
},
methods: {
removeAt (idx) {
this.list.splice(idx, 1);
},
add () {
let i = this.list.length
this.list.push({
name: "Juan " + i, id: i, text: "" });
}
}
};
</script>
<style lang="scss" scoped>
// .flip-list-move {
// transition: transform 0.5s;
// }
// .no-move {
// transition: transform 0s;
// }
.container {
width: 100%;
text-align: center;
.handle {
cursor: move;
}
.list-group {
margin-bottom: 50px;
.list-group-item {
display: flex;
justify-content: space-between;
padding: 0 10px;
border: 1px solid #ccc;
height: 40px;
line-height: 40px;
width: 300px;
text-align: center;
color: #fff;
background: rgba(0, 0, 0, 0.6);
}
}
}
</style>