vuedraggable实现两个盒子之间相互拖拽

最新推荐文章于 2026-05-07 11:28:28 发布

原创

最新推荐文章于 2026-05-07 11:28:28 发布 · 1.3k 阅读

标签

#vue

收录于

本篇博客介绍了如何在Vue.js项目中使用vuedraggable插件实现两个盒子之间的相互拖拽功能。首先，通过Vue CLI创建项目并安装vuedraggable。接着，创建两个可拖拽的盒子，使用vuedraggable组件并设置相关选项。最后，启动项目并测试拖拽功能，提升用户体验。

系列文章目录

文章目录

系列文章目录
前言
一、项目设置和安装
二、创建两个可拖拽的盒子
三、测试拖拽功能
总结

前言

当涉及到在Vue.js中实现两个盒子之间的相互拖拽功能时，一个非常强大且常用的解决方案是使用vuedraggable插件。vuedraggable是一个基于Vue.js的拖拽排序组件，它能够帮助我们轻松地实现可拖拽的列表和项目。在本篇博客中，我将为你详细介绍如何使用vuedraggable来实现两个盒子之间的相互拖拽功能。

一、项目设置和安装

首先，确保你已经创建了一个Vue.js项目。如果还没有，你可以使用Vue CLI来创建一个新项目。

vue create vuedraggable-demo

然后，进入项目目录并安装vuedraggable插件。

cd vuedraggable-demo
npm install vuedraggable

二、创建两个可拖拽的盒子

在你的Vue组件中，创建两个可拖拽的盒子。我们将使用vuedraggable组件来包裹这些盒子，并设置一些属性来实现拖拽功能。

<template>
  <div>
    <h1>Vue Draggable Demo</h1>
    <div class="box-container">
      <draggable v-model="box1Items" class="box" :options="dragOptions">
        <div v-for="(item, index) in box1Items" :key="item.id" class="box-item">
          {
   
   {
   
    item.text }}
        </div>