jQuery，在放入单元格后防止可排序和可拖动

Question

目标：我确实想拖放。我确实想在单元格之间进行排序。但是，一旦一个单元格被填满，我不希望能够将另一个项目拖放/排序到单元格中。应该是禁区。我已经能够使用以下方法成功禁用拖放：

$(this).droppable("option", "disabled", true);

除了我仍然可以从另一个单元格拖动/排序到单元格之外，我一切正常。我注意到在执行此操作时正在调用 Stop 事件。如果我可以像在上面的代码行中禁用“drop”一样禁用“stop”，那就太好了。

这是一个显示我的问题的小提琴： Fiddle Me This

Answer 1

这就是我最终不得不做的事情（参见“接收”事件）。似乎可能有一种更清洁的方法，但这有效：

    $(".droppedFields").sortable({
        cancel: null, // Cancel the default events on the controls
        connectWith: ".droppedFields",
        stop: function (event, ui) {
            makeUnDroppable();
        },
        receive: function (event, ui) {
            var source = ui.item;
            var target = $(this);

            var newCombinedTargetLength = target.text().length;
            var sourceLength = source.text().length;

            // cancel the sort if something is already there
            if (newCombinedTargetLength - sourceLength > 0) {
                $(ui.sender).sortable('cancel');
            }            
        }
    }).disableSelection();