vue-draggable-resizable中的Draggable组件如何在固定区域内拖拽

在Vue draggable resizable库中，`draggable`组件允许你在指定区域内进行拖拽操作。为了在固定区域内拖拽元素，你需要做以下几个步骤：

1. 安装并引入`vue-draggable-resizable`包：

   npm install vue-draggable-resizable

2. 在你的Vue组件中导入Draggable组件：

   import Draggable from 'vuedraggable-resizable';

3. 使用`draggable`属性设置元素为可拖动，并提供必要的配置。例如，在一个div上创建一个固定的拖拽区域：

   <template>
     <div class="drag-container">
       <draggable :items="items" :container=".container" :move="allowMove" @start="handleStart" @end="handleEnd">
         <div v-for="(item, index) in items" :key="index" class="draggable-item">
           {{ item.content }}
         </div>
       </draggable>
     </div>
   </template>

   <style scoped>
     .container {
       position: relative;
       width: 300px;
       height: 200px;
       border: 1px solid black;
       overflow: hidden; /* 防止内容超出容器 */
     }
   </style>

   <script>
   export default {
     data() {
       return {
         items: [
           { content: 'Item 1', x: 0, y: 0 },
           { content: 'Item 2', x: 50, y: 50 },
         ],
       };
     },
     methods: {
       allowMove({ containerRect }) {
         // 确保元素只能在容器范围内移动
         const clientRect = this.$refs.container.getBoundingClientRect();
         return !(
           containerRect.left > this.items[index].x ||
           containerRect.right < this.items[index].x ||
           containerRect.top > this.items[index].y ||
           containerRect.bottom < this.items[index].y
         );
       },
       handleStart(e, { index, model }) {
         // 开始拖拽时记录初始位置
         this.startX = model.x;
         this.startY = model.y;
       },
       handleEnd(e, { index, model }) {
         // 结束拖拽后更新元素位置
         model.x = e.clientX - this.startX;
         model.y = e.clientY - this.startY;
       },
     },
   };
   </script>

在这个例子中，`:container=".container"`指定了拖拽区域为`.container`元素，`:move="allowMove"`函数用于限制拖拽范围。`@start="handleStart"`和`@end="handleEnd"`分别处理开始和结束拖拽事件，更新元素的位置。