vuedraggable自由拖拽按钮

vuedraggable是一个基于Vue.js的插件，它提供了一种简单的方式来实现自由拖拽按钮的功能。通过vuedraggable，你可以轻松地将按钮或其他元素拖拽到指定的位置，并且可以自定义拖拽时的样式和行为。

vuedraggable的使用步骤如下：
1. 首先，在你的Vue项目中安装vuedraggable插件。可以通过npm或yarn进行安装，命令如下：

   npm install vuedraggable

或

   yarn add vuedraggable

2. 在需要使用自由拖拽按钮的组件中，引入vuedraggable插件：

   import draggable from 'vuedraggable'

3. 在组件的template中，使用draggable标签来包裹需要拖拽的按钮或元素：

   <draggable>
     <button>按钮1</button>
     <button>按钮2</button>
     <button>按钮3</button>
   </draggable>

4. 可以通过配置draggable标签的属性来自定义拖拽行为和样式。例如，可以设置axis属性来限制只能在水平或垂直方向进行拖拽：

   <draggable axis="x">
     <button>按钮1</button>
     <button>按钮2</button>
     <button>按钮3</button>
   </draggable>

以上就是使用vuedraggable实现自由拖拽按钮的基本步骤。你可以根据自己的需求进行更多的配置和样式定制。