vuedraggable 实现拖拽功能

最新推荐文章于 2025-05-08 12:00:57 发布

原创

最新推荐文章于 2025-05-08 12:00:57 发布 · 4.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了如何使用 Vue.js 的 vuedraggable 插件创建一个拖放小应用。通过示例代码展示了如何设置组件、监听拖放事件以及禁用拖动等操作，帮助读者理解如何将元素从右侧选项区拖拽到左侧目标区域，并在成功拖动后改变颜色，同时避免重复拖动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

项目需求

简单实现一个vue拖拽小案例，右侧选项区拖拽到左侧目标区域，拖动成功的不能再次拖动，并改变颜色。

安装 vuedraggable 插件

cnpm i -S vuedraggable

页面直接引用

import draggable from “vuedraggable”;
…
components: { draggable },

源码参考

<template>
  <div class="container">
    <div class="content">
      <div class="targetContent">
        <draggable
          :list="resultlists"
          group="article"
          :disabled="disabled"
          @start="targetStart"
          @end="targetEnd"
          class="targetCard"
          style="height: 100px"
        >
          <div
            v-for="resultlists in resultlists"
            :key="resultlists.id"
            class="list-complete-item"
          >
            <div class="list-complete-item-handle">{
   
   {
   
    resultlists.name }}</div>
          </div>
        </draggable>
      </div>
      <div class="optionsContent">
        <draggable
          :list="targetLists"
          :options="{
   
   
            group: {
   
    name: optionsName, pull: 'clone' },
            sort: false,
          }"
          filter=".undraggable"
          @end="optionEnd"
          class="dragArea"
        >
          <div
            v-