vuedraggable拖拽

vuedraggable

简述

本文是开发中需要使用的插件，自己查阅资料整理，图片来源均以标注出处

安装

npm install vuedraggable

注册

在页面中注册使用

import draggable from "vuedraggable"

示例

图片截取于 前端太佬 添加链接描述

<template>
  <div id="app">
    <div class="list-container">
      <div class="list">
        <h3>List 1</h3>
        <draggable 
          :list="list1" 
          :group="{ name: 'items', pull: 'clone', put: true }"
          item-key="id"
          class="drag-area list1"
          @start="startDrag"
          @end="endDrag"

        >
          <template #item="{ element }">
            <div class="item">
              {{ element.name }}
            </div>
          </template>
        </draggable>
      </div>

      <div class="list">
        <h3>List 2</h3>
        <draggable 
         :list="list2" 
         :group="{ name: 'items', pull: false, put: true }"
          item-key="id"
          class="drag-area list2"
        >
          <template #item="{ element }">
            <div class="item">
              {{ element.name }}
            </div>
          </template>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import draggable from "vuedraggable";

const list1 = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
]);

const list2 = ref([
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' }
]);
function startDrag(e){
  console.log("开始拖拽",e)
}
function endDrag(e){
  console.log("结束拖拽",e)
}
</script>

<style>
.list-container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.list {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  background: #f8f8f8;
}

.drag-area {
  min-height: 40px;
}

.item {
  padding: 8px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  cursor: move;
  transition: all 0.3s ease;
}

.item:hover {
  background-color: #e6f4ff;
  border-color: #91caff;
}

/* 拖拽时的视觉效果 */
.sortable-ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

配置属性

以下图片来自 添加链接描述