不同大小的JQuery float 框

Question

我在页面上有 9 个 float 框，共 3 列，是从此 JQ 脚本生成的:

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

列实际上是“ul”，框是“li”，因此每列“ul's”中有 3 个框“li's”。

这是我的 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/