Jquery Sortable，按类对多个项目进行排序答案

【问题标题】：Jquery Sortable, sort multiple items by classJquery Sortable，按类对多个项目进行排序
【发布时间】：2011-11-08 09:19:14
【问题描述】：

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

  <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()
        });
        }
        });
        });

        });

标题项永远不会有一个类，子元素将有一个标题的类。 sortable 是否可以根据类对标头及其元素进行排序？即拖动标题将拖动所有子元素，而子元素将单独拖动。

【问题讨论】：

你应该做 2 个不同的 UL 连接，然后让它们可排序:)

标签： javascript jquery

【解决方案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;
}

（遗憾的是项目似乎没有回调）。

这里是a fiddle 给你

【讨论】：