javascript - Vue 可拖动排序仅在选择时

Question

我正在尝试在 Vue 中创建某种文件夹和文件系统。

我想让它做什么

当用户选择一个项目并将其拖到另一个项目上时，它会显示 2 个 div。一个 div 表示“交换位置”，另一个表示“放入文件夹”。根据这些 div 的哪个 od，用户放开鼠标按钮将执行所选操作。

它能做什么

当我将一个项目拖到另一个项目上时，Vue dragable 只会对项目进行自动排序。无法检测到诸如 mouseover 之类的事件来显示提到的 div。

例子

Answer 1

这不会解决您的问题，但会对您有很大帮助：因为您通过单击并按住鼠标拖动“文件”，所以不要使用@mouseenter或其他@mouse.... 而不是使用@drag...start/over/enter. 因此，如果您在文件夹中，则可以通过单击文件来打印红色和绿色区域：

<div
  class="item folder"
  @dragover="
    callMe();  /*you can for instance call method in METHODS part too*/
    actions = true;
  "
  @mouseleave="actions = false" /*works just if you are not holding a file woth the mouse*/
>