vue-drag-resize Draggable使用

`vue-drag-resize`是一个用于Vue.js的拖放和尺寸调整的轻量级库，它允许你在Vue组件中添加可拖动和可调整大小的功能。Draggable是这个库中的核心组件之一，它提供了拖拽元素的能力，并支持元素的水平、垂直或者指定方向的拖动。

使用`vue-drag-resize`的基本步骤如下：

1. 安装：首先通过npm或yarn安装库到项目中：

   npm install vue-drag-resize

2. 引入并注册组件：在你的Vue文件里引入并使用Draggable组件：

   <template>
     <draggable :options="{ ... }" ref="draggableRef">
       <!-- Your draggable element(s) here -->
     </draggable>
   </template>

   <script>
   import draggable from 'vue-drag-resize';

   export default {
     components: {
       draggable,
     },
     // ...
   }
   </script>

3. 设置选项：配置`:options`属性，可以设置如目标元素、回调函数、限制区域等参数。例如：

   :options="{ grid: [10, 10], resize: { handles: ['n', 's', 'e', 'w'] } }"

4. 监听事件：你可以监听`@start`、`@end`、`@dragging`等事件，在这些事件中处理拖动或调整过程中的逻辑。