不同尺寸

Question

jQuery的浮動框我有3列第9個浮動框，從這個JQ腳本生成的：

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

列實際上是「UL」和框是「禮」，所以每列「ul's」中有3個「李氏」盒子。

這是我的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> 

我的問題是，我怎麼能有不搞亂整個場景​​在同一列不同尺寸的盒子=）

我的佔位符應符合當前移動盒子，即它應該「知道」它是一個大小爲A，B或C的盒子，從而適應盒子的大小。

我的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

我認爲你缺少的是在你的排序定義forcePlaceholderSize:true。

也就是說，用placeholder: 'ui-state-highlight'合併將使該是大小要移動的盒子相同的佔位符...

下面是它的工作的例子：http://jsfiddle.net/ryleyb/Y5fzX/1/

Answer 2

我不知道它是正是你正在尋找，但你有沒有嘗試將佔位符的高度/寬度設置爲sortable.start（）中當前拖動元素的高度/寬度？

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