IT俱乐部 JavaScript vue3 vue-draggable-next如何实现拖拽穿梭框效果

vue3 vue-draggable-next如何实现拖拽穿梭框效果

vue3 vue-draggable-next 拖拽穿梭框效果

列表 1

{{ item.name }}

列表 2

{{ item.name }}
  
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);  
    }  
  }  
};  
  
.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实现的,你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景。
  • 官网

安装

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 滚动速度

简单例子(只能在一组里拖拽切换排序)

{{ element.Marc_title }}
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);
}
.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俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/11716.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部