如何实现仅拖动jQuery Sortable中已勾选的列表项

要实现只让已勾选复选框的列表项可拖拽排序，我们可以利用jQuery UI Sortable的start事件钩子，在拖拽开始前检查当前项的复选框状态，若未勾选则取消拖拽操作。

完整代码示例 #

HTML部分

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<ul id="sortable">
  <li class="ui-state-default"><input type="checkbox" name="item_select"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><input type="checkbox" name="item_select"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><input type="checkbox" name="item_select"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><input type="checkbox" name="item_select"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><input type="checkbox" name="item_select"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><input type="checkbox" name="item_select"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><input type="checkbox" name="item_select"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

CSS部分

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; background: #ddd }
#sortable li span { position: absolute; margin-left: -1.3em; }

JavaScript部分

$(function() {
  $("#sortable").sortable({
    start: function(event, ui) {
      // 获取当前拖拽项内的复选框状态
      const isChecked = ui.item.find('input[type="checkbox"]').is(':checked');
      // 若未勾选则取消拖拽
      if (!isChecked) {
        $(this).sortable('cancel');
      }
    }
  });
});

关键逻辑说明 #

• 在Sortable的start事件中，通过ui.item获取当前被拖拽的列表项，再定位到其内部的复选框元素。
• 使用is(':checked')判断复选框是否处于勾选状态，若未勾选则调用sortable('cancel')终止拖拽操作。
• 这种方式能动态响应复选框的状态变化，无论用户何时勾选或取消勾选，规则都会实时生效。

内容的提问来源于stack exchange，提问作者Vaishnavi Deshpande