jQuery 如何使用可排序的 jQueryUI 关闭排序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1168981/
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
How to turn off sorting with jQueryUI sortable?
提问by Milan Babu?kov
I have implemented jQueryUI sortable list and it works really nice. At some point in time, I wish to disable further sorting and keep item order as it is, without user being able to change it.
我已经实现了 jQueryUI 可排序列表，它的效果非常好。在某个时间点，我希望禁用进一步排序并保持项目顺序不变，而用户无法更改它。
It tried something this:
它尝试了这样的事情：
$('.sortable').sortable('disable');
and this:
和这个：
$('.sortable').each(function() { $(this).sortable('disable'); });
and:
和：
$('.sortable').disable();
and:
和：
$('.sortable').cancel();
and various combinations of all that. All without success.
以及所有这些的各种组合。都没有成功。
Can anyone tell ne The Right Way™ to do it?
任何人都可以告诉 ne The Right Way™ 这样做吗？
Update:I'm using jQuery 1.3.2 and jQueryUI 1.7.2. A possible problem could be that I have two independent sortable lists on the page, so I have sortable1 and sortable2 classes. I'm actually doing:
更新：我使用 jQuery 1.3.2 和 jQueryUI 1.7.2。一个可能的问题可能是我在页面上有两个独立的可排序列表，所以我有 sortable1 和 sortable2 类。我实际上在做：
$('.sortable2').sortable('disable');
Update2:the problem was me using .sortable instead of #sortable. Everything works fine now.
更新 2：问题是我使用 .sortable 而不是 #sortable。现在一切正常。
回答by isxaker
$(ui.sender).sortable( "disable" )
回答by Mars Robertson
I was in the process of debugging:
我在调试的过程中：
- click to make sortable
- finish (sortable disable)
- click to make sortable again didn't work
- solution / workaround: set disabled option to false explicitly
- 单击以进行排序
- 完成（可排序禁用）
- 单击以再次排序不起作用
- 解决方案/解决方法：将禁用选项显式设置为 false
http://plnkr.co/edit/uX6cNNiYoejYqwQicEhg?p=preview
http://plnkr.co/edit/uX6cNNiYoejYqwQicEhg?p=preview
function sortableEnable() {
$( "#sortable" ).sortable();
$( "#sortable" ).sortable( "option", "disabled", false );
// ^^^ this is required otherwise re-enabling sortable will not work!
$( "#sortable" ).disableSelection();
return false;
}
function sortableDisable() {
$( "#sortable" ).sortable("disable");
return false;
}
Hope that helps.
希望有帮助。
回答by Chris Glasier
Thanks Michal
谢谢迈克尔
I made a version for lists that can be either sortable or editable.
我为可以排序或可编辑的列表制作了一个版本。
Very useful for me at least!
至少对我很有用！
function sortableEnable() {
$( "ul" ).sortable();
$( "ul" ).sortable( "option", "disabled", false );
$( "li" ).attr("contentEditable","false");
$( "li" ).css("cursor","move");
return false;
}
function sortableDisable() {
$( "ul" ).sortable("disable");
$( "li" ).attr("contentEditable","true");
$( "li" ).css("cursor","default");
return false;
}
$(function() {
sortableEnable();
});
回答by Andi
Whilst the suggested posts before me were useful, they didn't solve what I was trying to achieve. I wanted to turn on and off sortable across multiple areas and add the ability to make content selectable again.
虽然我之前的建议帖子很有用，但它们并没有解决我想要实现的目标。我想打开和关闭跨多个区域的可排序功能，并添加使内容再次可选的功能。
Here is the code that I used:
这是我使用的代码：
function AddSortable() {
$("ul").sortable({
connectWith: "ul",
disabled: false
}).disableSelection();
return false;
};
function RemoveSortable(){
$("ul").sortable({
disabled: true
}).enableSelection();
return false;
}
回答by isync
$( ".selector" ).sortable( "disable" );
$( ".selector" ).sortable( "disable" );
回答by Rahul Gupta
To disable sortable()you can use
要禁用，sortable()您可以使用
$(".sortable").sortable("disable");
$(".sortable").sortable("disable");
To toggle enable/disable on the click of a button with id toggleButton
单击带有 id 的按钮切换启用/禁用 toggleButton
$('#toggleButton').click(function() {
//check if sortable() is enabled and change and change state accordingly
// Getter
var disabled = $(".sortable").sortable( "option", "disabled" );
if (disabled) {
$(".sortable").sortable( "enable" );
}
else {
$(".sortable").sortable("disable");
}
});
回答by VorTechS
If you want to disable all sortables (as I needed to) then you can use the sortables class 'ui-sortable' as the selector.
如果您想禁用所有可排序对象（如我需要的那样），那么您可以使用可排序对象类 'ui-sortable' 作为选择器。
e.g
例如
$(".ui-sortable").sortable("enable");
$(".ui-sortable").sortable("disable");
