Question

我在一个包含3列的页面上有9个浮动框，从这个JQ脚本生成：

<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/

Answer 2

我不知道它正是您要搜索的内容，但您是否尝试将占位符的高度/宽度设置为sortable.start（）中当前拖动元素的高度/宽度？ / p>

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

不同大小的JQuery浮箱

2 个答案: