jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript-尝试将可排序元素设置为禁用 大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用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>

列表项不应被允许移动,但事实并非如此

最佳答案
尝试以这种方式:

$(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>

大佬总结

以上是大佬教程为你收集整理的javascript-尝试将可排序元素设置为禁用 全部内容,希望文章能够帮你解决javascript-尝试将可排序元素设置为禁用 所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: