jQuery可拖动和可排序无法按预期工作

Question

该设置有一些我要解决的问题，已经解决了一段时间。 基本上，我使它可排序，因此您可以将项目移动到另一个文件夹。 但是由于您可能没有打开每个文件夹（jsfiddle中未显示），因此设置为使用悬停类，但是当拖动文件并开始排序时，即使我没有将悬停在某个文件夹上，悬停类有时仍会显示...

同样，在对文件进行排序之后，尝试再次将其拖移会使它出现故障，并使其由于某种原因而无法真正再次移动。

https://jsfiddle.net/4Lz5Lfsj/12/

HTML：

<main>
  <div id="menu">
    <ul id="menuul">
      <li class="folder">Folder</li>
      <li class="folder">Folder</li>
      <li class="folder">Folder</li>
      <ul>
        <li class="clippet">File</li>
        <li class="clippet">File</li>
      </ul>

      <li class="clippet">File</li>
      <li class="clippet">File</li>
      <li class="clippet">File</li>
      <li class="clippet">File</li>
    </ul>
  </div>
</main>

CSS：

main
{
  display: inline-block;
  border: 1px solid black;
  padding-right: 12px;
}

#menu ul li
{
  display: flex;
}

#menu ul li p
{
  display: inline-block;
  margin: 0;
  margin-left: 8px;
}

.draggableHover
{
  background-color: grey;
}

JS：

$(".clippet").draggable({
    revert: "invalid",
    scroll: false,
    delay: 300,
    cursorAt: { left: -5 },
    cursor: 'move',
    connectToSortable: '#menuul'
  });

  $(".folder").droppable({
    accept: ".clippet",
    hoverClass: 'draggableHover'
  });

  $("#menuul").sortable(
  {
    revert: true,
    handle: 'p'
  });

Answer 1

您可以通过将类更改为不允许删除的文件夹，模拟文件夹内的子级作为代码来实现此目的，每个文件夹都应具有自己的ul，并将其放入该文件夹后附加该文件。

over与out功能可以帮助您以突出被允许放文件的文件夹。

这里的想法起作用：

https://jsfiddle.net/4Lz5Lfsj/17