CODEWITHSUNDEEP
javascriptjquery
maxum
maxum

Reputation: 2915

Jquery Sortable, sort multiple items by class

I have a set of list items in a sortable, similar to the following...

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

The sorting is updated in a DB to keep everything in order as follows. 

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

        });

The header item will never have a class, the child elements will have a class of the header. Is it possible for sortable to sort a header and it's elements based on class? i.e dragging header will drag all child elements, yet child elements will drag individually.

Upvotes: 2

Views: 2136

Answers (1)

roselan
roselan

Reputation: 3775

you can add items: '.1, .5' in the plugin options

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

but this wont prevent the user to drag'n'drop last element into the first "group" (recordsArray_8 between 1 and 2)

if you want strictly "no class" you can use a function for items:

$("#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 items doesn't seem to have a callback).

and here is a fiddle for you

Upvotes: 2

Related Questions