如何使用可排序的 jQueryUI 关闭排序?
Posted
技术标签:
【中文标题】如何使用可排序的 jQueryUI 关闭排序?【英文标题】:How to turn off sorting with jQueryUI sortable? 【发布时间】:2010-11-13 05:30:11 【问题描述】:我已经实现了 jQueryUI 可排序列表,它工作得非常好。在某个时间点,我希望禁用进一步排序并保持项目顺序不变,而用户无法更改它。
它尝试过这样的事情:
$('.sortable').sortable('disable');
还有这个:
$('.sortable').each(function() $(this).sortable('disable'); );
和:
$('.sortable').disable();
和:
$('.sortable').cancel();
以及所有这些的各种组合。都没有成功。
谁能告诉 ne 正确的方法™ 这样做吗?
更新:我正在使用 jQuery 1.3.2 和 jQueryUI 1.7.2。一个可能的问题是我在页面上有两个独立的可排序列表,所以我有 sortable1 和 sortable2 类。我实际上在做:
$('.sortable2').sortable('disable');
Update2:问题是我使用 .sortable 而不是 #sortable。现在一切正常。
【问题讨论】:
很奇怪。文档说.sortable('disable')
docs.jquery.com/UI/Sortable#method-disable
第一种方式是documentation中给出的例子。我刚刚用我自己的一个项目对其进行了测试,它运行良好。您使用的是哪个版本的 jQuery 和 jQuery UI?我分别有 1.3.2 和 1.7.2。
第一种方式是[文档][1]中给出的示例。我刚刚用我自己的一个项目对其进行了测试,它运行良好。您使用的是哪个版本的 jQuery 和 jQuery UI?我分别有 1.3.2 和 1.7.2。 [1]:jqueryui.com/demos/sortable/#method-cancel
“The Right Way”商标+1。
【参考方案1】:
$(ui.sender).sortable( "disable" )
【讨论】:
【参考方案2】:我正在调试中:
-
点击可排序
完成(可排序禁用)
点击重新排序不起作用
解决方案/解决方法:将禁用选项显式设置为 false
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;
希望对您有所帮助。
【讨论】:
【参考方案3】:谢谢米哈尔
我为可排序或可编辑的列表制作了一个版本。
至少对我很有用!
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();
);
【讨论】:
并在内容可编辑时隐藏蓝色边框,使用以下 css 样式: [contenteditable]:focus outline: 0px solid transparent; 【参考方案4】:虽然我之前的建议帖子很有用,但它们并没有解决我想要实现的目标。我想打开和关闭跨多个区域的可排序,并添加使内容再次可选择的能力。
这是我使用的代码:
function AddSortable()
$("ul").sortable(
connectWith: "ul",
disabled: false
).disableSelection();
return false;
;
function RemoveSortable()
$("ul").sortable(
disabled: true
).enableSelection();
return false;
【讨论】:
sortable('disabled') 对我不起作用,但具有 disabled:true 的对象确实起作用。contentEditable
有什么用?
完美,谢谢(y)【参考方案5】:
如果您想禁用所有可排序(如我所愿),那么您可以使用可排序类“ui-sortable”作为选择器。
例如
$(".ui-sortable").sortable("enable");
$(".ui-sortable").sortable("disable");
【讨论】:
【参考方案6】:$( ".selector" ).sortable( "disable" );
来自http://api.jqueryui.com/sortable/#option-disabled
【讨论】:
【参考方案7】:要禁用sortable()
,您可以使用
$(".sortable").sortable("disable");
单击 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");
);
【讨论】:
以上是关于如何使用可排序的 jQueryUI 关闭排序?的主要内容,如果未能解决你的问题,请参考以下文章