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

Question

我一直把头撞在墙上想弄清楚。我找到了一个例子，说明了我试图通过Sortable.js库回购这里所做的事情，但是我还没有能够使用Vue.Draggable实现它。

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

其中一个问题(可能)是，我试图指定一个“垃圾”按钮作为删除区域，如果它引用相同的可拖动group，则该拖动元素将被追加到按钮组并抛出整个UI。所以，有一件非常重要的事情，因为有某种用户反馈(例如，当拖放元素悬停时，垃圾图标会变红)，但是拖动的元素不应该插入到按钮组中。

初始拖动状态

​

​

打算删除行动

​

​

提前感谢！

Answer 1

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

如何让垃圾拖放接受任何组

解决方法是设置组属性的pull和push。

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

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

如何防止将按钮设置为可拖动区域()时出现混乱

最简单的方法是将插入的项设置为display: none。您可以简单地隐藏设置为draggable属性的任何内容，或者使用ghostClass设置(按照文献资料)。

如何给用户反馈？

这件事很棘手。拖放不会在正在使用的拖放区域上设置类。但是，您可以使用智能css选择器来排序--实现您想要的结果。首先，我们定义一个页脚。

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

我们将这个绝对位置定位到下拉区域，并确保它覆盖了整个物体。删除的元素现在将始终出现在页脚之前。这很好，因为我们可以使用下一个选择器(+)在插入的下拉项目之后选择页脚，并应用不同的样式。在本例中，我们应用红色背景并将文本变为白色。

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

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

代码框上有一个完整的工作示例。

​

​