Draggable如何在固定区域内拖拽

Draggable 是一种常见的交互组件，通常用于实现元素在指定区域内的拖动功能。在 JavaScript 库如 Vue 或 React 中，可以使用它们提供的内置插件或者第三方库（如 Vuedraggable 或 react-beautiful-dnd）来实现这个效果。

例如，在 Vue 中使用 vuedraggable：

<template>
  <div class="draggable-container">
    <draggable v-model="items" :options="{ group: 'group', dragStart: startDrag, dragEnd: endDrag }">
      <div v-for="(item, index) in items" :key="index" class="draggable-item">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', position: { x: 0, y: 0 } },
        { name: 'Item 2', position: { x: 100, y: 0 } }
      ]
    };
  },
  methods: {
    startDrag(e, item) {
      item.position = { x: e.pageX, y: e.pageY }; // 获取开始拖动时的位置
    },
    endDrag(e, result) {
      // 根据 result 新位置更新数据并处理其他操作
      this.items.forEach(item => {
        item.position.x = result.newIndex * 100; // 假设每个项的宽度为100px
        item.position.y = result.newIndex * 100;
      });
    }
  }
};
</script>

<style scoped>
.draggable-container {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}
.draggable-item {
  width: 100px;
  height: 50px;
  margin: 5px;
}
</style>

在这个例子中，`vuedraggable` 组件设置了 `group` 属性来组织成一个可拖动的组，`dragStart` 和 `dragEnd` 钩子函数分别在开始和结束拖动时触发，用来跟踪并更新元素的位置。拖拽过程会被限制在 `.draggable-container` 区域内。