Попытка отключить сортируемый элемент - PullRequest
Новая
       30

Попытка отключить сортируемый элемент

0 голосов
/ 10 января 2019

Я использую сортировку jQuery для заказа элементов списка. Однако я установил определенные элементы 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>

Элемент списка не должен быть перемещен, однако это не так

1 Ответ

0 голосов
/ 10 января 2019

Попробуйте сделать это так: 

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