Vue 可拖动排序仅在选择时

Question

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

我想要它做什么

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

它的作用

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

Example

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*/
>