Vue公司可拖动排序仅在选择

Question

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

我想要它做什么

当用户选择一个项目并将其拖到另一个项目上时，将显示2格。一个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*/
>