重新排列图块

Question

我有两组图块，如下图所示。每个瓷砖都是一个DIV。

我希望能够给一组内或与相邻的组内的新位置的瓷砖拖动到一个新位置。

与Windows 8类似，我也希望能够将组中的图块拖动到两个组之间的空间中，以创建该图块的新组。

这是多远我能得到 - 我能够创建一个组是拖动排序。

<div class="demo"> 
    <ul id="sortable"> 
     <li class="ui-state-default">1</li> 
     <li class="ui-state-default">2</li> 
     <li class="ui-state-default wide">3</li> 
     <li class="ui-state-default">4</li> 
     <li class="ui-state-default">5</li> 
    </ul> 
</div> 

http://jsfiddle.net/psivadasan/FmWCx/

得到任何帮助。谢谢你的时间。

Answer 1

我做过类似的东西，在过去，我这是怎么实现的吧：http://jsfiddle.net/dazefs/vGYVX/

<div style="background-color:Gray"> 

<ul id="sortable"> 
    <li> 
     <span style="background-color:yellow"> 
     Item 1 
     </span> 

    </li> 
    <li> 
    <span style="background-color:red"> 
     Item 2 
    </span> 

    </li> 
    <li> 
     <span style="background-color:green"> 
    Item 3 
    </span> 

    </li> 
    <li> 
    <span style="background-color:Blue"> 
      Item 4 
    </span> 
    </li> 
    </ul> 

<ul id="sortable2" style="width:60%"> 
<li> 
    <span style="background-color:yellow"> 
     Item 5 
    </span> 
</li> 
    <li> 
    <span style="background-color:red"> 
     Item 6 
    </span> 
</li> 
    <li> 
    <span style="background-color:green"> 
     Item 7 
    </span> 
    </li> 
    <li> 
     <span style="background-color:Blue"> 
      Item 8 
     </span> 
    </li> 
</ul> 

</div> 

$(function() { 
    $("#sortable, #sortable2").sortable({ 
     connectWith: "#sortable2, #sortable", 
     receive: function (event, ui) { 
      alert('item has been sorted'); 
     } 
    }); 

    //}) 
}); 

为了实现用3个组：

http://jsfiddle.net/dazefs/XRdz6/

Answer 2

小提琴：http://jsfiddle.net/iambriansreed/A8NYw/

$(function() { 
    $("#sortable1,#sortable2") 
     .sortable({ connectWith: ".sortable"}) 
     .disableSelection(); 
});​