我使用jQuery Sortable对列表项进行排序。但是,我为某些li元素设置了禁用类名称,以禁用对该特定项目的排序。 我还将该类添加到了jquery代码中以禁用,但是它仍然允许重新排列这些项目
我看过各种消息来源,说只是在选择器上使用了启用/禁用,但是似乎没有任何作用 我搜索了SO,还查看了http://api.jqueryui.com/sortable/#method-option
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$(".notsortable").sortable("disable");
} );
</script>
<ul id="sortable">
<li class="ui-state-default notsortable">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #1</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #2</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #3</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #4</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #5</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #6</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #7</li>
</ul>
不允许移动列表项,但事实并非如此
答案 0 :(得分:2)
尝试以这种方式进行操作:
$(function() {
$("#sortable").sortable({
cancel: ".ui-state-disabled",
items: "li:not(.ui-state-disabled)"
})
});
.ui-state-disabled {
opacity: 1 !important;
pointer-events: auto !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<ul id="sortable">
<li class="ui-state-disabled">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="https://www.google.com/">Test</a>
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #2
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #3
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #4
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #5
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #6
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Order #7
</li>
</ul>