我一直在用头撞墙试图解决这个问题。我通过 Sortable.js 库 repo here 找到了一个非常准确的示例。但我无法使用 Vue.Draggable 来实现它.
我的理论是添加一个 <draggable/>
相同的元素 group
作为其余元素并收听 @add
事件,然后从其列表中删除该拖动的元素。
一个陷阱(也许)是我试图将“垃圾桶”按钮指定为删除区域,如果它引用相同的可拖动 group
,那个被拖拽的元素被附加到按钮组并抛出整个 UI。因此,一个非常重要的事情是存在某种用户反馈(例如,当鼠标悬停在拖动元素上时,垃圾桶图标会变成红色),但拖动的元素不应插入到按钮组中。
初始拖动状态
预期的删除操作
提前致谢!
最佳答案
让我们依次解决一些问题:
如何让可拖动垃圾接受任何组
答案是设置组属性的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 并确保它覆盖了整个东西。丢弃的元素现在将始终出现在页脚之前。这很棒,因为我们可以使用 next-selector (+
) 选择插入的 dropitem 之后的页脚,并应用不同的样式。在这种情况下,我们应用红色背景并将文本设为白色。
.trashzone .footer {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.trashzone .dropitem + .footer {
background: red;
color: white;
}
codesandbox 上提供了完整的工作示例。
关于javascript - Vue.Draggable 通过拖动到指定区域来删除项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51619243/