vue中vuedraggable拖拽插件使用，指定范围拖拽。

在Vue中使用vuedraggable进行拖拽操作时，可以通过bounding-box属性来指定一个拖拽的范围。这个属性接受一个选择器或者一个HTMLElement，用来指定一个容器作为拖拽的范围。

以下是一个简单的例子，演示如何使用vuedraggable并指定一个拖拽范围：

<template>
  <div>
    <draggable :list="list" :bounding-box="dragContainer">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </draggable>
    <div ref="dragContainer" style="height: 200px; width: 200px; border: 1px solid #000;">
      拖拽范围
    </div>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  computed: {
    dragContainer() {
      // 使用计算属性来确保元素在组件实例化后可用
      return this.$refs.dragContainer;
    },
  },
};
</script>

在这个例子中，dragContainer 是一个计算属性，它返回对应于模板中 ref="dragContainer" 的DOM元素。这个元素就是拖拽操作的范围。通过设置 bounding-box="dragContainer"，你指定了拖拽元素必须保持在这个容器内。