Question

我有一组可排序的列表项，类似于以下内容......

  <ul id="item_list" class="ui-sortable">
  <li id="recordsArray_1">item</li>    
  <li id="recordsArray_2" class='1'>item</li>
  <li id="recordsArray_3" class='1'>item</li>
  <li id="recordsArray_4" class='1'>item</li>
  <li id="recordsArray_5">item</li>    
  <li id="recordsArray_6" class='5'>item</li>
  <li id="recordsArray_7" class='5'>item</li>
  <li id="recordsArray_8" class='5'>item</li>
  </ul>

在数据库中更新排序，以使所有内容按顺序保持如下。

  $(document).ready(function(){ 
  $(function() {
  $("#item_list").sortable({ opacity: 0.6,   cursor: 'move', update: function() {
  var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
  $.post("http://"+document.domain+"/includes/updateDB.php", order,function(theResponse){
    setClass()
        });
        }
        });
        });

        });

标题项永远不会有类，子元素将具有标题类。是否有可能对标题及其基于类的元素进行排序？即拖动标题将拖动所有子元素，但子元素将单独拖动。

Answer 1

您可以在插件选项中添加items: '.1, .5'

 $("#item_list").sortable({ opacity: 0.6, items: '.1, .5', cursor: 'move', update: function()

但这不会阻止用户将最后一个元素拖放到第一个“组”（recordsArray_8在1和2之间）

如果您想严格“无课”，可以使用项目功能：

$("#item_list").sortable({ opacity: 0.6, items: selectSortItems("#item_list"), cursor: 'move', update: function()...

function selectSortItems (sel) {
  var list = [];
    $(sel).find('li').each( function () {
        if ( $(this).attr('class') ) { list.push(this) };
    });

    return list;
}

（sadely项目似乎没有回调）。

此处为a fiddle

Jquery Sortable，按类排序多个项目

1 个答案: