jQuery UI Sortable 识别空的可排序容器答案

【问题标题】：jQuery UI Sortable to recognise empty sortable containersjQuery UI Sortable 识别空的可排序容器
【发布时间】：2015-05-19 12:19:31
【问题描述】：

我在使用 jQuery UI Sortable 时遇到了一些问题。我正在尝试制定每日计划，以便您在一天中拥有每个小时，以及可以移动的任务。

这是我目前所拥有的一个活生生的例子：plantoday.lukeseager.com

如您所见，您可以很好地对项目进行排序。但是...如果您尝试将任务 4 从 06:00 移动到 04:00，它会将任务 3 下移一步到 06:00，这显然是不需要的，因为 04:00 是空白的并且不应该影响其他任务。

我觉得我可以使用sort 选项做一些事情，以检查一个项目是否为空白，以及它是否以某种方式停止排序以防止移动其他任务。但我不确定该怎么做。

这是我目前的代码：

$('.tasks').sortable({
    revert: true,
    handle: '.content',
    cancel: '.blank'
});

我的 HTML 结构很简单：

<ol class="tasks">
    <li class="task">
        <div class="content">
            <h4>Some task</h4>
            <p>A description for task</p>
        </div>
    </li>
    <li class="task">
        <div class="content">
            <h4>Some task 2</h4>
            <p>A description for task 2</p>
        </div>
    </li>
    <li class="task blank"></li>
    <li class="task blank"></li>
    // etc...
</ol>

任何帮助将不胜感激！

【问题讨论】：

你需要结合 draggable 和 droppable 来限制 slot 为空时的 drop 而不会干扰已经包含任务的 slot。

标签： jquery jquery-ui

【解决方案1】：

正如我已经说过的，您需要实现 draggable 和 droppable 的组合来实现您想要的。

感谢这篇文章： jQuery sortable with droppable

$(".content").draggable({
    revert: true,
    revertDuration: 0
});

$(".task").droppable({
    activeClass: "active",
    hoverClass: "hover"
.
.
.
});

在您的情况下，我已将上述帖子中给出的解决方案（已接受的答案）纳入其中，请参阅DEMO

【讨论】：