不同尺寸

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()); } });