Question

Does there exist anything to Javascript / jQuery which would allow reorder li blocks in the fashion iPhone does it: this effect can be seen when you reorder apps in iPhone main menu

• All list items are blocks (images) in 4 x 4 grid

• When reordering is enabled items have shaky animation effect

• The user can use mouse/touch to drag to reorder the items

Answer 1

A good place to start is jQuery UI sortable:
http://jqueryui.com/demos/sortable/#display-grid

All other requirements can be added, for example deletable.

$(".apps") // container holding sortable elements

    // make it sortable
    .sortable()

    // add delete button behaviour
    .delegate(".delete","click",function(e){
        var btn = $(this)
        , container = btn.closest(".apps")
        , item = btn.closest("li")
        // shrink animation
        item.animate({
            width: 0,
            height: 0,
            margin: 24
        },function(){
            // remove item from sortable.
            item.remove();
            // make sortable see that an item has been removed.
            container.sortable("refresh");
        });

    });

The above code assumes HTML like:

<ul class="apps">
   <li>
      <span class="delete">x</span>
      1
   </li>
   <li>
      <span class="delete">x</span>
      2
   </li>
   <li>
      <span class="delete">x</span>
      3
   </li>
</ul>

How the list and items look like, should be achieved through CSS.
We merely add behaviour with javascript.

.apps {padding:10px;overflow:hidden;border:1px solid #000;}
.apps li {display:block;width:50px;height:50px;border:1px solid #000;float:left;margin:5px;position:relative;background:#ccc;}
.apps .delete {display:none;}
.apps li:hover {z-index:1;}
.apps li:hover .delete {display:block;text-indent:-9999;overflow:hidden;position:absolute;top:-10px;right:-10px;background:#000;width:20px;height:20px;cursor:default;}

See above example: http://jsfiddle.net/KkXZ3/

Ofcourse a lot more needs to be done, like:
– add shakyness
– create/destroy sortable on touch-and-hold
– sliding item animation
– droppable items so that they can turn into containers

In any case, a lot happens in the GUI app behaviour of an iphone, I seriously doubt only 1 widget/script can provide all that behaviour. It’s actually a composition of various techniques and widgets.

This should get you started.