vue3 vue-draggable-next 拖拽穿梭框效果
1 2 3 4 5 6 7 8 9 10 11 | <div> <h2>列表 1</h2> <div class="list-item"> {{ item.name }} </div> <h2>列表 2</h2> <div class="list-item"> {{ item.name }} </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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); } } }; |
1 2 3 4 5 6 7 8 9 | .list-item { /* 添加一些样式以便区分 */ margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; /* 过渡效果（如果需要） */ transition: transform 0.3s ease; } |
vue3 vue.draggable.next 拖拽插件
简单介绍
- vue.draggable.next 是一款vue3的拖拽插件,是vue.draggable升级版本，同样是基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景。
- 官网
安装
1 | npm i -S vuedraggable@next |
导入组件
1 | 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 | 滚动速度 |
简单例子（只能在一组里拖拽切换排序）
1 2 3 4 5 6 7 8 | <div class="marc-content"> <table class="table"><tbody><tr><th>{{ element.Marc_title }}</th> <td></td> <td></td> <td></td> </tr></tbody></table></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 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);} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | .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; } } } }} |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
