vue3 vue-draggable-next如何實現(xiàn)拖拽穿梭框效果

更新時間：2024年06月07日 09:10:23 作者：游九塵

這篇文章主要介紹了vue3 vue-draggable-next如何實現(xiàn)拖拽穿梭框效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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) {  
      // 這里可以添加拖動結束后的邏輯，但通常不需要，因為數(shù)據(jù)會自動更新  
      console.log('Dragging ended:', evt);  
    }  
  }  
};  
</script>

<style scoped>  
.list-item {  
  /* 添加一些樣式以便區(qū)分 */  
  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實現(xiàn)的，你可以用它來拖拽列表、菜單、工作臺、選項卡等常見的工作場景。
官網(wǎng)

安裝

npm i -S vuedraggable@next

導入組件

import draggable from 'vuedraggable'

屬性說明

屬性名稱	說明
group	如果一個頁面有多個拖拽區(qū)域，通過設置group名稱可以實現(xiàn)多個區(qū)域之間相互拖拽或者 { 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類的元素上才能觸發(fā)拖到事件
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,有滾動區(qū)域是否允許拖拽
scroll-fn	滾動回調(diào)函數(shù)
scroll-fensitivity	距離滾動區(qū)域多遠時，滾動滾動條
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 數(shù)據(jù)列表
const MarcList = reactive([
   {
      Marc_title: '字段名稱1',
      Marc_number: '001',
      Marc_count: '1 1',
      Marc_content: '字段內(nèi)容1',
   },
   {
      Marc_title: '字段名稱2',
      Marc_number: '002',
      Marc_count: '1 2',
      Marc_content: '字段內(nèi)容2',
   },
   {
      Marc_title: '字段名稱3',
      Marc_number: '003',
      Marc_count: '0 3',
      Marc_content: '字段內(nèi)容3',
   },
   {
      Marc_title: '字段名稱4',
      Marc_number: '004',
      Marc_count: '1 4',
      Marc_content: '字段內(nèi)容4',
   },
   {
      Marc_title: '字段名稱5',
      Marc_number: '005',
      Marc_count: '0 5',
      Marc_content: '字段內(nèi)容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>