Réorganiser les dalles

Question

J'ai deux groupes de dalles comme indiqué dans le graphique ci-dessous. Chaque tuile est un DIV.

Je veux être en mesure de faire glisser une tuile vers une nouvelle position au sein d'un groupe ou à un nouveau poste au sein du groupe adjacent.

Et semblable à windows 8, je veux aussi être capable de faire glisser une tuile dans un groupe à l'espace entre deux groupes pour créer un nouveau groupe pour la tuile.

Voici jusqu'où j'ai pu obtenir - j'ai pu créer un seul groupe qui est glisser-sortable.

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

apprécierais toute aide. Merci pour votre temps.

Answer 1

Je l'ai fait quelque chose de similaire dans le passé, voilà comment je parvins: 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'); 
     } 
    }); 

    //}) 
}); 

Pour atteindre avec 3 groupes de tuiles:

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

Answer 2

Fiddle: http://jsfiddle.net/iambriansreed/A8NYw/

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