将Vue.Draggable删除项目拖到指定区域

Question

我一直把头撞在墙上，试图找出答案。我通过Sortable.js库仓库here找到了一个几乎可以尝试完成的示例，但我无法使用Vue.Draggable来实现它。

我的理论方法是添加一个<draggable/>元素，该元素与其余元素位于同一group中，并在其上侦听@add事件，然后将其删除将该元素从其列表中拖出。

一个陷阱（也许）是我试图将一个“垃圾箱”按钮指定为移除区域，如果它引用了相同的可拖动group，则该拖动的元素将附加到按钮组并抛出整个用户界面。因此，非常重要的一点是，会有一些用户反馈（例如，当将鼠标悬停在拖动元素上时，垃圾桶图标变为红色），但是拖动的元素不应插入按钮组。

初始拖动状态

预期的删除操作

谢谢！

Answer 1

让我们依次解决一些问题：

我如何让可拖动垃圾箱接受任何组

答案是设置组属性的pull和push。

  trashOptions: {
    group: {
      name: 'trash',
      draggable: '.dropitem',
      put: () => true,
      pull: false
    }
  }

通过将put设置为始终返回true的函数，它将接受任何组。或者，您可以将其设置为包含您接受的组的数组。

将按钮设置为可拖动区域时，如何防止按钮被弄乱

最简单的方法是将插入的项目设置为display: none。您可以简单地隐藏设置为draggable属性的内容，也可以使用ghostClass设置（根据the documentation）。

如何向用户提供反馈？

这很棘手。 Draggable不会在您使用的可拖动区域上设置类。但是，您可以使用智能的CSS选择器进行排序以实现所需的功能。首先，我们定义一个页脚。

<draggable v-model="trashZone" class="dropzone trashzone" :options="trashOptions">
  <div slot="footer" class="footer">Trash</div>
</draggable>

我们将此绝对值放置在dropzone上，并确保它覆盖了整个内容。现在，放置的元素将始终显示在页脚之前。这很棒，因为我们可以使用下一个选择器（+）在插入的dropitem之后选择页脚，并应用其他样式。在这种情况下，我们应用红色背景并将文本设置为白色。

.trashzone .footer {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.trashzone .dropitem + .footer {
  background: red;
  color: white;
}

可在codeandbox上找到完整的工作示例。