Question

I’ve got this piece of code
http://jsfiddle.net/THnan/

but everytime I sort an element I would like to check how many children has the destination div and if they’re more than N code should take the last child of the destination div and put it at the BEGINNING of the start div (even if the last child is the new sorted element).

I hope I put it clear.
How can I achieve this behaviour?

Thank you in advance!

Answer 1

Well, here’s a “naive” (as in, take the first approach that jumps to mind) version, using sortable’s receive event. Used N to signify the max number of elements on either side.

http://jsfiddle.net/3NBT7/1/

$(function(){
   var N = 4;

   $("#left-side, #right-side").sortable({
      axis: "x",
      connectWith: ".droppable",
      receive: reSort
   })
   .disableSelection();

   // Called when a sortable item has been received, see above
   function reSort(event, ui)
   {
      var other, children;

      children = $(this).children();

      if (children.length > N)
      {
         // Find the other sortable panel, based on id. 
         // There are other ways, depending on the HTML.
         other = ($(this).attr("id") == "left-side")
               ? $("#right-side") 
               : $("#left-side");

         // Insert last child before first child of other:
         children.last().insertBefore(other.children().first());
      }
   }
});

If resorting depended on side, I’d use if/else instead:

http://jsfiddle.net/3NBT7/4/

      if (children.length > N)
      {
          if ($(this).attr("id") == "left-side")
          {
              children.last().insertBefore($("#right-side").children().first());
          }
          else
          {
              children.first().insertAfter($("#left-side").children().last());
          }
      }