$(document).ready( function () {

  buttonUp = "<a class='moveup' ><img src='img/go-up.png' /></a>";
  buttonDown = "<a class='movedown' ><img src='img/go-down.png' /></a>";
  buttonLeft = "<a class='moveleft' '><img src='img/go-previous.png' /></a>";
  buttonRight = "<a class='moveright' '><img src='img/go-next.png' /></a>";


  $('a.moveup').bind("click", Move.up);
  $('a.movedown').bind("click", Move.down);
  $('a.moveleft').bind("click", Move.left);
  $('a.moveright').bind("click", Move.right);


});

Move =  {
  left: function() {
      ThisNode = $("../..",this);
      OtherNode = $("../../../..",this);

      ThisNode.slideUp(100);
      ThisNode.slideDown(300);

      ThisNode.find(".icons").append(buttonRight).end();
      ThisNode.find(".moveleft").remove().end();
      ThisNode.find(".moveright").click(Move.right).end();
      OtherNode.after(ThisNode);

      return false;
  },

  right: function() {
    ThisNode = $("../..",this);

    if ( ThisNode.next().find("ul").size() ) {
      $("../..",this).next().find("ul/li:last").after($("../..",this));
    }

    else {
      $("../..",this).next().append("<ul class='sortable sortable2'><li class='sortableitem'>foo</li></ul>");
      /* nor works this one
      $("../..",this).next().append("<ul></ul>").append("<li></li>");
      */

    }

    ThisNode.find(".icons").append(buttonLeft).end();
    ThisNode.find(".moveright").remove().end();
    ThisNode.find(".moveleft").click(Move.left).end();

    return false;
  },

  down: function() {
    ThisNode = $("../..",this);
    OtherNode = $("../..",this).next();

    ThisNode.hide(80);
    OtherNode.hide(200);
    ThisNode.before(OtherNode);
    ThisNode.show(200);
    OtherNode.show(300);

    return false;
  },

  up: function() {

    ThisNode = $("../..",this);
    OtherNode = $("../..",this).prev();

    ThisNode.hide(100);
    OtherNode.hide(300);
    ThisNode.after(OtherNode);
    ThisNode.show(300);
    OtherNode.show(400);

    return false;
  }
}

$(document).ready( function () {

  buttonUp = "<a class='moveup' ><img src='img/go-up.png' /></a>";
  buttonDown = "<a class='movedown' ><img src='img/go-down.png' /></a>";
  buttonLeft = "<a class='moveleft' '><img src='img/go-previous.png' /></a>";
  buttonRight = "<a class='moveright' '><img src='img/go-next.png' /></a>";


  $('a.moveup').bind("click", Move.up);
  $('a.movedown').bind("click", Move.down);
  $('a.moveleft').bind("click", Move.left);
  $('a.moveright').bind("click", Move.right);

  $('#buttonSave').click( function() {
    if (!$("#message1").size()) {
      $("#nodes").parent().prepend("<div class='message' id='message1'></div>");
    }
    $("#message1").hide();
    $("#message1").load("/nodes/sort", serialize("#nodes"));
    $("#message1").show("slow");
    return false;
  });

});

Move =  {
  left: function() {
      ThisNode = $("../..",this);
      OtherNode = $("../../../..",this);

      ThisNode.slideUp(100);
      ThisNode.slideDown(300);

      ThisNode.find(".icons").append(buttonRight).end();
      ThisNode.find(".moveleft").remove().end();
      ThisNode.find(".moveright").click(Move.right).end();
      OtherNode.after(ThisNode);

      return false;
  },

  right: function() {
    ThisNode = $("../..",this);

    if ( ThisNode.next().find("ul").size() ) {
      $("../..",this).next().find("ul/li:last").after($("../..",this));
    }

    else {
      $("../..",this).next().append("<ul class='sortable sortable2'><li class='sortableitem'>foo</li></ul>");
      /* nor works this one
      $("../..",this).next().append("<ul></ul>").append("<li></li>");
      */

    }

    ThisNode.find(".icons").append(buttonLeft).end();
    ThisNode.find(".moveright").remove().end();
    ThisNode.find(".moveleft").click(Move.left).end();

    return false;
  },

  down: function() {
    ThisNode = $("../..",this);
    OtherNode = $("../..",this).next();

    ThisNode.hide(80);
    OtherNode.hide(200);
    ThisNode.before(OtherNode);
    ThisNode.show(200);
    OtherNode.show(300);

    return false;
  },

  up: function() {

    ThisNode = $("../..",this);
    OtherNode = $("../..",this).prev();

    ThisNode.hide(100);
    OtherNode.hide(300);
    ThisNode.after(OtherNode);
    ThisNode.show(300);
    OtherNode.show(400);

    return false;
  }
}

function serialize(s) {
    var elements=new Array();
    $("#nodes").children().each( function(i) {

        elements[i] = new Array();
        elements[i]['id'] = $(this).id();

        var subelements = new Array();

        $("ul",this).children().each( function(j) {
          subelements[j] = $(this).id().substring(4);
        });

        elements[i]['children'] = subelements;

    });

    var a = [];
    $.each(elements, function(k) {
      n = this['id'].substring(4) + '/weight';
      v = k;
      a.push({name: n, value: v});
      n = this['id'].substring(4) + '/children';
      v = this['children'].toString();
      a.push({name: n, value: v});
    });
    return a;

}

http://xcite-online.de/tests/jquery1/

Jquery and uls on the flow

jquery

JavaScript