我有許多 jQuery UI 可排序的父元素。每個父元素最多可以包含一個可放置的子元素，因此：
- 如果容器是空的，它應該能夠從任何其他容器接收可放置元素
- 如果容器不是空的：
- 它不應該能夠從另一個容器接收可放置元素
- 但是當前子元素應該可以放置到任何其他空父元素
為了幫助實作這一點，父元素都有 class drop_target_cell，而空的父元素有 class empty_drop_target_cell。這些會隨著可放置元素的分配而更新。
為了實作這一點，我嘗試在用戶開始拖動可放置元素時禁用該類的任何元素，drop_target_cell但不禁用該類empty_drop_target_cell，然后drop_target_cell在拖動操作完成時重新啟用該類的所有元素。然而，這并不像我預期的那樣作業；仍然可以將可放置元素拖到已經有子元素的父容器中。
下面是我的最大努力，添加了背景顏色更改，這些更改（正確）指示在拖動開始時應禁用哪些父元素：
$("#available_sections, td.drop_target_cell").sortable({
connectWith: "#available_sections, td.drop_target_cell",
start: function (event, ui) {
$("td.drop_target_cell:not(td.drop_target_cell.empty_drop_target_cell)").css('background-color', '#ff00ff');
$("td.drop_target_cell:not(td.drop_target_cell.empty_drop_target_cell)").sortable("disable");
},
stop: function (event, ui) {
$("td.drop_target_cell").css('background', 'none');
$("td.drop_target_cell").sortable("enable");
}
});
$("td.drop_target_cell").on("sortremove", function (event, ui) {
$(this).addClass('empty_drop_target_cell');
});
$("td.drop_target_cell").on("sortreceive", function (event, ui) {
$(this).removeClass('empty_drop_target_cell');
});
有沒有更好的方法，或者我可以改變什么來讓它作業？
uj5u.com熱心網友回復：
我設法使用下面的代碼來解決這個問題。所有放置目標都有 classdrop_target_cell并且填充的放置目標（應該只允許洗掉專案）有 class populated_drop_target_cell。
對于任何偶然發現這一點的人來說，有兩個重要的學習：
要使更改生效，您必須
$(this).sortable("refresh")在更改后致電。可排序串列元素祖先中某處的任何位置 css (
fixed等relative) 都可能會干擾可排序。如果任何事情都沒有按預期作業并且您找不到原因，那么可能就是這樣。另見這個問題（這讓我撓了好幾個小時）。$("td.drop_target_cell").sortable({ connectWith: "td.drop_target_cell", start: function (event, ui) { $("td.drop_target_cell.populated_drop_target_cell").sortable("option", "disabled", true); $(this).sortable("refresh"); }, stop: function (event, ui) { $("td.drop_target_cell").sortable("option", "disabled", false); $(this).sortable("refresh"); } });
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/410504.html
標籤：
上一篇：pythonrandom.choiceTypeError:'(array([109,1280,427,531,1563,102,1774,802,560,0]),slice(None,Non