不同大小的JQuery浮箱

Question

我在这个JQ脚本生成的页面上有3个浮动框,有3列:

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

这些列实际上是"ul",并且框是"li",因此每列"ul"中有3个框"li".

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