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

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

1 个答案: