jquery ui sortable 禁用一个 li 项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15370754/
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
jquery ui sortable disable for one li item
提问by a_pajic
It is possible do disable jquery ui sortable just for one list item? Here is the code example:
是否可以仅针对一个列表项禁用可排序的 jquery ui？下面是代码示例：
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
For example I will disable sortable when I click item. Please Help.
例如，当我单击项目时，我将禁用可排序。请帮忙。
Here is the javascript code:
这是javascript代码：
$(document).ready(function(){
$('.sortable li').click(function(){
// Disable sortable for this item.............
});
});
回答by j08691
Sure, try something like this:
当然，尝试这样的事情：
$(".sortable").sortable({
items: "li:not(.unsortable)"
});
$(".sortable").disableSelection();
By using the items optionyou can specify the items that can and can't be sorted.
通过使用items 选项，您可以指定可以和不能排序的项目。
回答by Mladen Janjetovic
You can explicitly exclude items (aside by not including them):
您可以明确排除项目（除了不包括它们）：
$( ".sortable" ).sortable({
cancel: ".disable-sort-item"
});
回答by user3455726
I know, this question is old. but I let you know right answer. How to dynamically make item disabled and enabled by click. Because I have the same issue at 2016 :D
我知道，这个问题很老了。但我让你知道正确答案。如何通过单击动态禁用和启用项目。因为我在 2016 年有同样的问题：D
first of all. All what you need to do is set items to the sortable what will be disabled at start. Add parameter what remove disabled items from the list(it needed on first init):
首先。您需要做的就是将项目设置为可排序的内容，在开始时将被禁用。添加从列表中删除禁用项目的参数（首次初始化时需要）：
var sortable = $("#sortable-sections");
sortable.sortable({
items: 'li:not(.ui-state-disabled)',
helper: 'clone',
});
sortable.disableSelection();
(bootstrap used in example)
（示例中使用的引导程序）
Then just add event listener, I used onClick, so example here:
然后只需添加事件侦听器，我使用了 onClick，因此示例如下：
sortable.find('li').click(function () {
$(this).toggleClass('ui-state-disabled');
$(this).hasClass('ui-state-disabled') ? $(this).removeData('sortableItem') : false;
});
Sortable-item will be sortable only if he have data what called sortableItem so it will make it dynamically disabled, hope it helps someone.
Sortable-item 只有在他拥有称为 sortableItem 的数据时才能排序，因此它将使其动态禁用，希望它对某人有所帮助。
Cheers!
干杯!
回答by Hooman Bahreini
This question has two similar answers... but their behavior is very different.
这个问题有两个相似的答案……但他们的行为却大不相同。
Using cancel, you can make item sortable / not-sortabledynamically:
使用cancel，您可以动态地使项目可排序/不可排序：
$(".sortable_cancel").sortable({
cancel: ".unsortable"
});
Using items, you can make item sortable / not-sortablebut only at initialization time:
使用items，您可以使项目可排序/不可排序，但只能在初始化时：
$(".sortable_item").sortable({
items: "li:not(.unsortable)"
});
See the difference in this demo:
查看此演示中的区别：
$(".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>