vue3 vue-draggable-next如何实现拖拽穿梭框效果
作者:游九尘
这篇文章主要介绍了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: [true, false, ‘clone’, array , function], put: [true, false, array , function] } |
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属性设置成true |
chosen-class | :ghost-class=“hostClass” 被选中目标的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
drag-class | :drag-class="dragClass"拖动元素的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
force-fallback | 默认false,忽略HTML5的拖拽行为,因为h5里有个属性也是可以拖动,你要自定义ghostClass chosenClass dragClass样式时,建议forceFallback设置为true |
fallback-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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。