JQuery boîtes flottantes de différentes tailles

Question

J'ai 9 boîtes flottantes sur une page avec 3 colonnes, générées à partir de ce script JQ:

<script type="text/javascript"> 
    $(function() { 
     $("ul.connectedSortable").sortable({handle:'.kpiValueContainer', connectWith:'trysomethingelse', placeholder:'ui-state-highlight', revert: true}); 
    }); 
</script> 

Les colonnes sont en fait « ul » et les boîtes sont « li », donc il y a 3 cases "li's" dans chaque colonne "ul's".

Ceci est mon HTML:

<div class="boxContainer"> 
    <ul id="column1" class="connectedSortable"> 
     <li class="box1"></li> 
     <li class="box2"></li> 
     <li class="box3"></li> 
    </ul> 
    <ul id="column2" class="connectedSortable"> 
     <li class="box4"></li> 
     <li class="box5"></li> 
     <li class="box6"></li> 
    </ul> 
    <ul id="column3" class="connectedSortable"> 
     <li class="box7"></li> 
     <li class="box8"></li> 
     <li class="box9"></li> 
    </ul> 
</div> 

Ma question est, comment puis-je avoir des boîtes de tailles différentes dans la même colonne sans chambouler toute la scène =)

Mon espace réservé doit correspondre au courant boîte de déménagement, c'est à dire qu'il faut "savoir" qu'il s'agit d'une boîte de taille A, B ou C et donc s'adapter à la taille de la boîte.

Mon CSS:

.boxContainer 
{ 
    margin:0px; 
    width:1100px; 
    height:auto;} 

.column1, .column2, .column3 { 
    list-style-type: none; 
    margin:0 10px 0 0px; 
    float:left; 
    height:auto; 
    width:300px;} 

html>body .column1 li, .column2 li, .column3 li { 
    height:auto; 
    width:300px;} 

.column1 li, .column2 li, .column3 li { 
    margin:50px 0 0 0px; 
    height:255px; 
    width:300px;} 

Answer 1

Je pense que tout ce que vous manquez est forcePlaceholderSize:true dans votre définition sortable.

Cela, combiné avec placeholder: 'ui-state-highlight' fera des espaces réservés qui sont de la même taille que la zone que vous déplacez ...

Voici un exemple de ce travail: http://jsfiddle.net/ryleyb/Y5fzX/1/

Answer 2

Je ne sais pas, il est exactement ce que vous recherchez, mais avez-vous essayé de définir la hauteur/largeur de l'espace réservé à la hauteur/largeur de l'élément actuellement déplacé dans sortable.start()?

$(selector).sortable({ start: function(event, ui) { ui.placeholder.width(ui.item.width()); ui.placeholder.height(ui.item.height()); } });