Vue3中使用Vuedraggable拖拽
二 、使用三、Api原文地址:Vue3中简单使用vuedraggable拖拽_冷太阳a的博客-CSDN博客_vue3 拖拽感谢原文作者分享文档地址:vue.draggable一款基于vue的拖拽插件 - itxst.com
·
一、安装引入
npm i vuedraggable@4.1.0 --save
import Draggable from 'vuedraggable';
二 、使用
<template>
<button @click="submit">提交数据</button>
<div class="drag-box">
<Draggable
v-model="tags"
:list="list"
:animation="100"
item-key="id"
class="list-group"
:forceFallback="true"
ghost-class="ghost"
@change="onMoveCallback"
:move="getdata"
>
<template #item="{ element }">
<div class="items">
<div class="title">{{ element.label }}</div>
</div>
</template>
</Draggable>
</div>
</template>
<script lang="ts">
import { reactive} from 'vue';
import Draggable from 'vuedraggable';
export default {
components: {
Draggable,
},
setup() {
let list = reactive([
{
label: '模块1',
id: 1,
isflod: false,
},
{
label: '模块2',
id: 2,
isflod: false,
},
{
label: '模块3',
id: 3,
isflod: false,
},
{
label: '模块4',
id: 4,
isflod: false,
},
{
label: '模块5',
id: 5,
isflod: false,
},
{
label: '模块6',
id: 6,
isflod: false,
},
]);
const onMoveCallback = (val) => {
console.log('拖动前的索引 :' + val.moved.newIndex);
console.log('拖动后的索引 :' + val.moved.oldIndex);
};
const getdata = (val) => {
console.log(val.draggedContext.element.id);
};
// 查看最新的数据
const submit = () => {
console.log(list);
};
// watch(
// list,
// (newValue, oldValue) => {
// console.log('list', newValue, oldValue);
// },
// { immediate: true }
// );
return {
list,
onMoveCallback,
getdata,
submit,
};
},
};
</script>
<style scoped>
.drag-box .items {
display: flex;
justify-content: space-between;
width: 80%;
padding: 20px;
margin-bottom: 20px;
background: #e3e3e3;
border-radius: 8px;
}
</style>
三、Api
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) { … }
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px
原文地址:Vue3中简单使用vuedraggable拖拽_冷太阳a的博客-CSDN博客_vue3 拖拽
感谢原文作者分享
更多推荐
所有评论(0)