javascript - iPhone 之类的 Javascript/jQuery 重新排序/随机播放小部件

Question

Javascript/jQuery 是否存在任何允许在时尚 iPhone 中重新排序 li block 的功能:当您在 iPhone 主菜单中重新排序应用程序时，可以看到这种效果

• 所有列表项都是 4 x 4 网格中的 block (图像)

• 启用重新排序后，项目会出现晃动的动画效果

• 用户可以使用鼠标/触摸拖动来重新排序项目

Answer 1

一个好的起点是 jQuery UI 可排序: 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/

当然，还有很多工作要做，例如: - 添加摇晃感 - 按住时创建/销毁可排序 - 滑动项目动画 - 可掉落的元素，以便它们可以变成容器

无论如何，iPhone 的 GUI 应用程序行为中会发生很多事情，我严重怀疑只有 1 个小部件/脚本可以提供所有这些行为。它实际上是各种技术和小部件的组合。

这应该可以帮助您入门。