vuedraggable2.4禁止拖拽出所在区域

可以通过设置 `group` 属性来限制拖拽出所在区域。具体方法如下：

1. 在引入 `vuedraggable` 的组件中设置 `group` 属性：

<template>
  <div>
    <draggable v-model="list" :group="{ name: 'list', pull: 'clone', put: false }">
      <!-- draggable items -->
    </draggable>
  </div>
</template>

2. 设置 `group` 属性的 `put` 属性为 `false`，表示不允许放置到其他分组中。

<draggable :group="{ name: 'list', pull: 'clone', put: false }"></draggable>

设置后，拖拽时只能在当前分组中移动，无法拖拽到其他分组中。

相关问题

vuedraggable禁止拖拽出所在区域

如果你想要禁止vuedraggable组件的拖拽出所在区域，可以使用vuedraggable组件提供的`draggable`属性。

你需要在`draggable`属性中设置一个函数，该函数接收两个参数：当前的拖拽元素和它的父元素。你可以在该函数中检查当前元素是否超出了其父元素的边界，并返回一个布尔值来控制该元素是否可以拖拽。

例如，你可以在`draggable`属性中设置以下函数：

<draggable v-model="list" :draggable="checkDraggable">
  <!-- your draggable content -->
</draggable>

methods: {
  checkDraggable: function (element, parent) {
    const elementRect = element.getBoundingClientRect();
    const parentRect = parent.getBoundingClientRect();
    return (
      elementRect.left >= parentRect.left &&
      elementRect.right <= parentRect.right &&
      elementRect.top >= parentRect.top &&
      elementRect.bottom <= parentRect.bottom
    );
  },
},

在上面的示例中，`checkDraggable`函数检查拖拽元素是否超出了其父元素的边界。如果拖拽元素在其父元素内，则返回`true`，表示可以拖拽；否则返回`false`，表示不可以拖拽。

这样就可以限制vuedraggable组件的拖拽操作只能在其所在区域内进行了。

vuedraggable禁止拖出所在区域

要禁止使用vuedraggable拖出所在区域，可以通过设置vuedraggable组件的`options`属性中的`group`属性来实现。具体步骤如下：

1. 在父组件中引入`vuedraggable`组件，并设置组件的`options`属性中的`group`属性，例如：

<template>
  <div>
    <h2>父组件</h2>
    <div class="wrapper">
      <draggable v-model="list" :options="{group:'items'}">
        <div v-for="item in list" :key="item.id" class="item">{{ item.name }}</div>
      </draggable>
    </div>
  </div>
</template>

在上面的代码中，我们设置了`options`属性中的`group`属性为`'items'`，表示所有拖拽元素都属于`'items'`分组。

2. 在父组件中添加样式，限制拖拽元素只能在所在区域内拖动，例如：

.wrapper {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  overflow: auto;
}

.item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  padding: 10px;
}

在上面的代码中，我们设置了`.wrapper`元素的`overflow`属性为`auto`，使得当子元素的高度超出父元素时，可以通过滚动条来滚动。同时，我们也设置了`.wrapper`和`.item`元素的边框和间距样式。

这样，我们就完成了禁止使用vuedraggable拖出所在区域的操作。