iPhone как виджет переупорядочения / случайного воспроизведения для Javascript / jQuery

Question

Существует ли в Javascript / jQuery что-нибудь, что позволило бы изменить порядок блоков li в моде, которую делает iPhone: этот эффект можно увидеть при изменении порядка приложений в главном меню iPhone

• Всеэлементы списка представляют собой блоки (изображения) в сетке 4 x 4

• При включенном переупорядочении элементы имеют шаткий эффект анимации

• Пользователь может использовать мышь/ нажмите, чтобы перетащить, чтобы изменить порядок элементов

Answer 1

Хорошее место для начала - сортируемый пользовательский интерфейс jQuery: http://jqueryui.com/demos/sortable/#display-grid

Можно добавить все другие требования, например, удаляемые.

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

    });

Приведенный выше код предполагает HTML как:

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

Как выглядит список и элементы, должно быть достигнуто с помощью CSS.Мы просто добавляем поведение с помощью 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;}

См. Пример выше: http://jsfiddle.net/KkXZ3/

Конечно, нужно сделать гораздо больше, например: - добавить шаткость - создать / уничтожить сортируемую на ощупь-and-hold - анимация скольжения элементов - элементы, которые можно перетаскивать, чтобы они могли превращаться в контейнерывсе это поведение.На самом деле это набор различных техник и виджетов.

Это должно помочь вам начать.