Question

Javascript / jQuery中是否存在任何可以在时尚iPhone中重新排序li块的功能：当您在iPhone主菜单中重新排序应用程序时可以看到此效果

所有列表项都是4 x 4网格中的块（图像）
启用重新排序时，项目动画效果不稳定
用户可以使用鼠标/触摸拖动来重新排序项目

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个widget / script可以提供所有这些行为。它实际上是各种技术和小部件的组合。

这应该让你开始。

iPhone就像Javascript / jQuery的重新排序/随机播放小部件一样

1 个答案: