动态启用/禁用 jquery 可排序项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4360904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dynamically enable/disable jquery sortable item
提问by annette
I have table rows that are sortable depending on whether certain radio buttons are checked or not. The sortables are initialized on document.readyas follows:
我的表格行可以根据是否选中某些单选按钮进行排序。sortables 初始化document.ready如下：
$(document).ready(function() {
// Return a helper with preserved width of cells
// handy code I got from http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
// #opts = table id; tr.ui-state-disabled class = rows not sortable
$("#opts tbody").sortable({
items: 'tr:not(.ui-state-disabled)',
cursor: 'crosshair',
helper: fixHelper
}).disableSelection();
});
I have the following function attached to the radio buttons (ids prefixed "active_") onchangewhich either adds or removes the ui-state-disabledclass attribute from table rows (dynamic ids prefixed "opt_"):
我将以下功能附加到单选按钮（以“active_”为前缀的 ID）onchange，它可以ui-state-disabled从表行（以“opt_”为前缀的动态 ID ）中添加或删除类属性：
var toggleDrag = function(i){
if ($('#active_'+i+'-0').is(':checked')) {
$('#opt_'+i).addClass('ui-state-disabled');
}
if ($('#active_'+i+'-1').is(':checked')) {
$('#opt_'+i).removeClass();
}
$("#opts tbody").sortable("option", "items", "tr:not(.ui-state-disabled)");
//$("#opts tbody").sortable("refresh");
//alert($('#opt_'+i).attr('class')); - alert indicates that the class attribute is being changed
//$("#opts tbody").sortable("option", "cursor", "auto"); - this works!
}
If I select a radio button that should make a previously un-sortable row sortable, it works and I can drag and drop the row. The problem is if I select a radio button to make a row that previously was sortable, un-sortable, I can still drag and drop it. The setter .sortable("option", "items", "tr:not..etc")doesn't appear "un-register" a row if it was previously sortable. I also tried .sortable("refresh") with no luck. And I have checked to see if the class attribute is being changed with an alert and it is.
如果我选择一个单选按钮，它应该使以前不可排序的行可排序，它会起作用，我可以拖放该行。问题是，如果我选择一个单选按钮来创建以前可排序、不可排序的行，我仍然可以拖放它。.sortable("option", "items", "tr:not..etc")如果先前可排序，则setter 不会显示“取消注册”行。我也试过 .sortable("refresh") 没有运气。我已经检查了类属性是否正在通过警报更改，并且确实如此。
Any help with this would be greatly appreciated.
对此的任何帮助将不胜感激。
回答by Hannele
I ran into the same problem, that the itemsoption doesn't seem to remove items which had been previously enabled.
我遇到了同样的问题，该items选项似乎没有删除以前启用的项目。
The canceloption, however, does. Note that the disabled items will shift around to make room for the sortable ones (the spot is still available as a drop target), but dragging the disabled items themselves will not work. Using a disabledclass also makes it easy to change the style based on whether or not the item is sortable (see on jsfiddle).
cancel但是，该选项确实如此。请注意，禁用的项目将四处移动，为可排序的项目腾出空间（该位置仍可用作放置目标），但拖动禁用的项目本身将不起作用。使用disabled类还可以根据项目是否可排序轻松更改样式（参见jsfiddle）。
The code here is partially based on Bah Bah the Lamb's answer, but it has been greatly tidied and simplified.
这里的代码部分基于 Bah Bah the Lamb 的回答，但已经大大整理和简化。
The html:
html：
<ul id="sorted-list">
<li>
<p><input type="checkbox" checked="true" /> Item 1</p>
</li>
<li>
<p class="disabled"><input type="checkbox" /> Item 2</p>
</li>
<li>
<p><input type="checkbox" checked="true" /> Item 3</p>
</li>
</ul>
The jQuery:
jQuery：
$("#sorted-list").sortable({
cancel:".disabled"
});
// add or remove the 'disabled' class based on the value of the checkbox
$("#sorted-list input").click(function() {
if (this.checked) {
$(this.parentElement).removeClass("disabled");
} else {
$(this.parentElement).addClass("disabled");
}
});
The CSS:
CSS：
li {
border: 1px solid #aaa;
background-color: #eee;
color:#555;
padding: 5px;
}
.disabled {
color:#ddd;
}
回答by Bah Bah the Lamb
I had a similar problem and found an easy solution (but in my example I am using a sortable ul not a table, as there is more freedom with mark-up in ul's).
我遇到了类似的问题并找到了一个简单的解决方案（但在我的示例中，我使用的是可排序的 ul 而不是表格，因为 ul 中的标记有更多的自由度）。
The idea behind it is to leave the list and all its items sortable, but remove the handle, thus disabling the individual item's ability to sort, as seen in this code
它背后的想法是让列表及其所有项目可排序，但删除句柄，从而禁用单个项目的排序能力，如此代码所示
<ul id="sorted-list">
<li>
<div class="handle sortable">
<p>Item 1</p>
<input type="button" value="Disable Sort" />
</div>
</li>
<li>
<div class="handle sortable">
<p>Item 2</p>
<input type="button" value="Disable Sort" />
</div>
</li>
<li>
<div class="handle sortable">
<p>Item 3</p>
<input type="button" value="Disable Sort" />
</div>
</li>
<li>
<div class="handle sortable">
<p>Item 4</p>
<input type="button" value="Disable Sort" />
</div>
</li>
</ul>
<script>
$("#sorted-list").sortable({
items: "li",
handle: ".handle.sortable"
});
$("#sorted-list").find("input").click(function() {
if ($(this).closest(".handle").hasClass("sortable"))
$(this).val("Enable Sort").closest(".handle").removeClass("sortable");
else $(this).val("Disable Sort").closest(".handle").addClass("sortable");
});
</script>
回答by matthewpavkov
Try using the disabledoption. http://jqueryui.com/demos/sortable/#option-disabled
尝试使用该disabled选项。http://jqueryui.com/demos/sortable/#option-disabled
回答by Lawrence Phillips
I've been trying to do the same thing. I really wanted the items feature rather than disabled. As pointed out above, there is a weakness in the jQueryUI implementation whereby the sortable don't refresh the items list should the items matched by the selectors change.
我一直在尝试做同样的事情。我真的想要项目功能而不是禁用。如上所述，jQueryUI 实现存在一个弱点，即如果选择器匹配的项目发生更改，则 sortable 不会刷新项目列表。
To get around this, I simply destroyed and reinstantiated the sortabled. I've adapted Hannele's JSfiddle to demonstrate (http://jsfiddle.net/Sxg8D/140/).
为了解决这个问题，我简单地销毁并重新实例化了 sortabled。我已经改编了 Hannele 的 JSfiddle 来演示（http://jsfiddle.net/Sxg8D/140/）。
$("#sorted-list").sortable({
items:"li:not(.disabled)"
});
$("#sorted-list input").click(function() {
if (this.checked) {
$(this.parentElement).removeClass("disabled");
} else {
$(this.parentElement).addClass("disabled");
}
$("#sorted-list")
.sortable( "destroy" )
.sortable({
items:"li:not(.disabled)"
});
});
回答by Rob
I know this is old, but had a similar problem. I had my sortable items in groupings. I wanted certain groups to be sortable anywhere and some to only be sortable to a subsection of groups.
我知道这是旧的，但有类似的问题。我有我的可排序项目分组。我希望某些组可以在任何地方排序，而有些组只能排序到组的一个子部分。
<div id="sortBlock">
<div id="noSort class="itemBlock">
<div class="item">
<div class="item">
</div>
<div id="canSort" class="itemBlock">
<div class="item">
<div class="item">
</div>
</div>
Items from noSortcan sort anywhere. Items from canSortcan only sort into other canSortblocks.
来自的项目noSort可以在任何地方排序。来自的项目canSort只能分类到其他canSort块中。
$("#sortBlock").sortable({
items: "> div.itemBlock > .item" // this makes sure only the sub items will be sortable
});
Then setting this rule after the init seemed to do the trick.
然后在 init 之后设置此规则似乎可以解决问题。
$("#sortBlock").sortable( "option", "items", "> div:not(#noSort) > .item");
Was trying to do it dynamically in the start/stop events, but this did the trick, not sure "why", so test well.
试图在开始/停止事件中动态执行此操作，但这确实成功了，不确定“为什么”，因此请好好测试。
