vue3 vue-draggable-next如何实现拖拽穿梭框效果
vue3 vue-draggable-next 拖拽穿梭框效果<template>
<div>
<h2>列表 1</h2>
<draggable v-model="list1" group="items" tag="transition-group" @end="onDragEnd">
<div v-for="(item, index) in list1" :key="item.id" class="list-item">
{{ item.name }}
</div>
</draggable>
<h2>列表 2</h2>
<draggable v-model="list2" group="items" tag="transition-group" @end="onDragEnd">
<div v-for="(item, index) in list2" :key="item.id" class="list-item">
{{ item.name }}
</div>
</draggable>
</div>
</template> <script>
import draggable from 'vue-draggable-next';
export default {
components: {
draggable
},
data() {
return {
list1: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
// ...
],
list2: [
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' }
// ...
]
};
},
methods: {
onDragEnd(evt) {
// 这里可以添加拖动结束后的逻辑，但通常不需要，因为数据会自动更新
console.log('Dragging ended:', evt);
}
}
};
</script> <style scoped>
.list-item {
/* 添加一些样式以便区分 */
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
/* 过渡效果（如果需要） */
transition: transform 0.3s ease;
}
</style>
vue3 vue.draggable.next 拖拽插件
简单介绍
[*]vue.draggable.next 是一款vue3的拖拽插件,是vue.draggable升级版本，同样是基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景。
[*]官网
安装
npm i -S vuedraggable@next
导入组件
import draggable from 'vuedraggable'
属性说明
属性名称说明group如果一个页面有多个拖拽区域，通过设置group名称可以实现多个区域之间相互拖拽或者 { name: “…”, pull: , put: }sort是否开启排序,如果设置为false,它所在组无法排序delay鼠标按下多少秒之后可以拖拽元素touchStartThreshold鼠标按下移动多少px才能拖动元素disabled:disabled= “true”,是否启用拖拽组件animation拖动时的动画效果，如设置animation=1000表示1秒过渡动画效果handle:handle=“.mover” 只有当鼠标在class为mover类的元素上才能触发拖到事件filter:filter=“.unmover” 设置了unmover样式的元素不允许拖动draggable:draggable=“.item” 样式类为item的元素才能被拖动ghost-class:ghost-class=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成truechosen-class:ghost-class=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成truedrag-class:drag-class="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成trueforce-fallback默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为truefallback-class默认false，克隆选中元素的样式到跟随鼠标的样式fallback-on-body默认false，克隆的元素添加到文档的body中fallback-tolerance按下鼠标移动多少个像素才能拖动元素，:fallback-tolerance=“8”scroll默认true,有滚动区域是否允许拖拽scroll-fn滚动回调函数scroll-fensitivity距离滚动区域多远时，滚动滚动条scroll-speed滚动速度
简单例子（只能在一组里拖拽切换排序）
<template>
<div class="marc-content">
<table class="table">
<draggable sort="true" :list="MarcList"
:force-fallback="true" @start="startHandle" @end="endHandle">
<template #item="{ element }">
<tr>
<th>{{ element.Marc_title }}</th>
<td><input type="text" v-model="element.Marc_number"></td>
<td><input type="text" v-model="element.Marc_count"></td>
<td><input type="text" v-model="element.Marc_content"></td>
</tr>
</template>
</draggable>
</table>
</div>
</template><script setup lang='ts'>
import { ref, reactive } from 'vue'
import draggable from "vuedraggable";
// 定义 Marc 数据列表
const MarcList = reactive([
{
Marc_title: '字段名称1',
Marc_number: '001',
Marc_count: '1 1',
Marc_content: '字段内容1',
},
{
Marc_title: '字段名称2',
Marc_number: '002',
Marc_count: '1 2',
Marc_content: '字段内容2',
},
{
Marc_title: '字段名称3',
Marc_number: '003',
Marc_count: '0 3',
Marc_content: '字段内容3',
},
{
Marc_title: '字段名称4',
Marc_number: '004',
Marc_count: '1 4',
Marc_content: '字段内容4',
},
{
Marc_title: '字段名称5',
Marc_number: '005',
Marc_count: '0 5',
Marc_content: '字段内容5',
}
])
// 开始拖拽
const startHandle = (e: any) => {
console.log(e);
}
// 结束拖拽
const endHandle = (e: any) => {
console.log(e);
}
</script><style scoped lang="less">
.marc-content {
margin: 15px 0;
.table,
.table tr td,
th {
height: 35px;
min-height: 35px;
border-collapse: collapse;
border: 1px solid #fff;
padding: 0 10px;
font-size: 16px;
color: #333;
box-sizing: border-box;
}
.table {
tr {
th {
background: #A9C8C6;
border-right: 2px solid rgb(127, 164, 156);
cursor: pointer;
}
}
}
.table {
tr {
&:hover {
background: rgba(127, 164, 156, 0.3);
th {
background: inherit;
border-right: 2px solid #ff0000;
}
}
}
}
}
</style>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
来源:https://www.jb51.net/javascript/322352ryf.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]