Prefacio
Draggable es un componente de vue basado en Sortable.js para implementar la función de arrastrar y soltar. Los datos arrastrados y los datos en los datos son enlaces bidireccionales. Cuando la interfaz cambia, los datos en los datos también cambian. La dirección de introducción de GitHub del complemento se explica en
detalle.
instalación
yarn add vuedraggable
npm i -S vuedraggable
Introducir
import draggable from 'vuedraggable'
usar
<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>
Parámetros de configuración comunes
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
evento
//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) //鼠标位置
}
Aquí hay un ejemplo completo con arrastrar y soltar animado. Si desea saber cómo es el efecto, por favor cv y ejecútelo usted mismo. Las imágenes dinámicas no son muy buenas para eso.
<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>