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

Question

我一直在用头撞墙试图解决这个问题。我通过 Sortable.js library repo here but I haven't been able to implement it using Vue.Draggable.

找到了一个非常准确的例子

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

一个问题（可能）是我正在尝试将 "trash" 按钮指定为删除区域，如果它引用相同的可拖动 group，则被拖动的元素将附加到按钮组并甩掉整个 UI。所以，一个非常重要的事情是有某种用户反馈（例如，当鼠标悬停在拖动元素上时垃圾图标变成红色），但拖动的元素不应该插入到按钮组中。

初始拖动状态

预期的删除操作

提前致谢！

Answer 1

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

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

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

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

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

如何防止我的按钮在设置为可拖动区域时被弄乱

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

如何给用户反馈？

这个很棘手。 Draggable 不会在您正在使用的可拖动区域上设置 class。但是，您可以使用智能 css selector 来实现您想要的。首先我们定义一个页脚。

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

我们将这个绝对定位到 dropzone 并确保它覆盖整个东西。丢弃的元素现在将始终出现在页脚之前。这很棒，因为我们可以使用 next-selector (+) 到 select 插入的 dropitem 之后的页脚，并应用不同的样式。在这种情况下，我们应用红色背景并将文本设为白色。

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

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

codesandbox 上提供了完整的工作示例。

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

Vue.Draggable delete item by dragging into designated region

javascript

draggable

vue.js

rubaxa-sortable

vue.draggable