如何在旅途中禁用 jquery 连接的 sortables？答案

【问题标题】：How to disable jquery connected sortables on the go?如何在旅途中禁用 jquery 连接的 sortables？
【发布时间】：2011-07-08 07:16:57
【问题描述】：

给定两个最简单的连接排序，

问题（已更新）。当可拖动项目离开其容器时，容器不应在该项目仍被拖动时接受它（就像容器已禁用一样）。在 DOM 级别上，占位符不应移回原始容器。

如何做到这一点？

jsfiddle 中的代码没有按预期工作，但应该是一个很好的起点。

【问题讨论】：

您希望在什么时候阻止原始容器接受可拖动项目？一旦你点击拖拽，它就处于拖拽状态，或者在它被拖到目的地之后你不想再拖回来？
我愿意在项目仍在拖动时阻止接受。但不管怎样，其他连接的 sortables 仍应接受可拖动项。
那么，如果我们将某些东西拖出并留在两个可排序对象之外的某个地方会发生什么？会被删除吗？顺便说一句“当一个可拖动的项目离开它的容器时，容器不应该在项目仍然被拖动时接受它” - 这是一个模糊的描述。如果该项目正在“被拖动”，那么任何人都不需要接受它。当物品被丢弃在某处时，接受是一个问题。

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

也许这样就可以了……

http://jsfiddle.net/pMYft/15/

$("#origin").sortable({
    connectWith: '.destination'
}).disableSelection();
$(".destination").sortable({
    connectWith: ".destination",
}).disableSelection();

源列表可以拖到任一目标列表，但不能拖回自身。

【讨论】：

不，也不是这样。关键点是“同时拖动”。实际上，在使用例如拖动时，所有连接的可排序都不会被禁用。 $(this).sortable('disable')。既不是起源，也不是任何其他。我正在寻找解决方法。
这在拖动时非常棘手。无论如何，如果用户单击它但将其拖出屏幕，则您需要元素的目的地，例如它需要在某个地方结束。那么，如果他们单击它但实际上并未将其拖到其他列表之一，那么默认位置是什么？
我想一个技巧可能是在原始容器顶部放置一个不可见的 div 块，您必须玩弄 z-index，但这可能是解决方法。
我不介意它是否会返回到原始容器。此外，stop 回调将在 drop 时触发，它可以与项目、容器或整个 DOM 实现任何逻辑。可以解决我的问题的是回调 enter 返回 false，但它还不存在。
我已经玩过 zIndexes 但没有帮助。 sortable 只是通过缓存的位置知道指针在容器上，它不能像那样被愚弄。

【解决方案2】：

我在 jsfiddle 上处理你的代码，我改变了它

$("ul").sortable({
    connectWith: "ul",
    items: "li:not(.ui-state-disabled)",
    cancel: "ui-state-disabled",
    out: function (e, ui) {
        ui.item.addClass("ui-state-disabled");       
    }
}).disableSelection();

【讨论】：

不幸的是，事实并非如此。期望的行为是您仍然可以将项目拖到原始容器上，但这根本不会影响容器，就像它被禁用一样。
我放弃了... :( 我不能。问题是占位符 :(