可以为一个列表项禁用jquery ui sortable吗? 这是代码示例:
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
例如,当我点击项目时,我将禁用可排序。 请帮助。
以下是javascript代码:
$(document).ready(function(){
$('.sortable li').click(function(){
// Disable sortable for this item.............
});
});
答案 0 :(得分:48)
当然,尝试这样的事情:
$(".sortable").sortable({
items: "li:not(.unsortable)"
});
$(".sortable").disableSelection();
通过使用items option,您可以指定可以排序和不排序的项目。
<强> jsFiddle example 强>
答案 1 :(得分:27)
您可以明确排除项目(不包括它们):
$( ".sortable" ).sortable({
cancel: ".disable-sort-item"
});
答案 2 :(得分:5)
我知道,这个问题已经过时了。但我告诉你正确的答案。如何通过单击动态地禁用和启用项目。 因为我在2016年遇到同样的问题:D
首先。 您需要做的就是将项目设置为可开始时将被禁用的可排序项目。添加参数从列表中删除禁用的项目(在第一次初始化时需要):
var sortable = $("#sortable-sections");
sortable.sortable({
items: 'li:not(.ui-state-disabled)',
helper: 'clone',
});
sortable.disableSelection();
(示例中使用的bootstrap)
然后就是 添加事件监听器,我使用onClick,所以这里的示例:
sortable.find('li').click(function () {
$(this).toggleClass('ui-state-disabled');
$(this).hasClass('ui-state-disabled') ? $(this).removeData('sortableItem') : false;
});
Sortable-item只有在拥有调用sortableItem的数据时才可以排序,因此它会动态禁用,希望它可以帮助某人。
干杯!
答案 3 :(得分:2)
这个问题有两个相似的答案...但是它们的行为非常不同。
使用cancel
,可以使项目可分类/不可分类 动态:
$(".sortable_cancel").sortable({
cancel: ".unsortable"
});
使用items
,您可以使项目可排序/不可排序,但只能在初始化时间:
$(".sortable_item").sortable({
items: "li:not(.unsortable)"
});
查看此演示中的区别:
$(".sortable_cancel").sortable({
cancel: ".unsortable"
});
$(".sortable_cancel").disableSelection();
$(".sortable_item").sortable({
items: "li:not(.unsortable)"
});
$(".sortable_item").disableSelection();
.sortable {
list-style-type: none;
width: 60%;
padding: 5px;
}
.sortable li {
padding-left: 1.5em;
}
li.unsortable {
background: #999;
opacity:.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div style="width:100%;">
<div style="width:50%; float:left;">
<label><b>Turn ON/OFF Item1 sortable</b></label>
<ul class="sortable sortable_cancel">
<li id="list1_toggle">Item1</li>
<li>Item2</li>
<li class="unsortable">Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
<button onclick="$('#list1_toggle').toggleClass('unsortable')">Toggle Item1's unsortable</button>
</div>
<div style="width:50%; float:right;">
<label><b>Item1 will remain sortable</b></label>
<ul class="sortable sortable_item">
<li id="list2_toggle">Item1</li>
<li>Item2</li>
<li class="unsortable">Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
<button onclick="$('#list2_toggle').toggleClass('unsortable')">Toggle Item1's unsortable</button>
</div>
</div>