无法使jQuery Sortable可以不使用任何列

Question

我一直在努力与jQuery的可排序。 我最初尝试按照有关可排序的Nettuts教程进行操作，但发现仪表板布局的列方法过于狭窄。 我想为图形等添加双倍宽度的小部件。所以我有一个固定宽度的父小部件div，并且不使用列。 固定宽度可以容纳2个常规窗口小部件或1个双倍宽度的窗口小部件。 这些小部件只是很好地包装在容器中，我只想对它们所在的顺序进行排序。

我遇到的问题是可排序的行为。 我可以对窗口小部件进行拖放和排序，但是单击和拖动时占位符不在正确的位置。 如果我抓住底部的小部件手柄并移动它，则占位符显示在顶部，其占小部件容器（#widgets）的宽度而不是小部件本身。 我可以在列中看到占位符可以从列中获取其宽度，但就我而言，即使是左/上位置也不正确。 占位符位于小部件容器的顶部。

另外，动画总是将小部件移动到小部件容器的左上方。 就像它认为插入点或上一个位置位于左上角，而不是其插入位置或上一个位置。

我知道我在这里想念什么。 我尝试过更改可排序方法的附加位置，但是它什么都没有改变。 任何帮助，将不胜感激！

呈现的HTML的一部分：

<div id="widgets" class="span9">
  <div class="widget span8">
    <div class="widget-head">
      <h4>Demo Activity 1</h4>
    </div>
    <div class="widget-content">
      <p>The content...</p>
    </div>
    <div class="widget-bottom"></div>
  </div>

  <div class="widget span4">
    <div class="widget-head">
      <h4>Demo Activity 2</h4>
    </div>
    <div class="widget-content">
      <p>The content...</p>
    </div>
    <div class="widget-bottom"></div>
  </div>

  <div class="widget span4">
    <div class="widget-head">
      <h4>Demo Activity 3</h4>
    </div>
    <div class="widget-content">
      <p>The content...</p>
    </div>
    <div class="widget-bottom"></div>
  </div>

</div>

基本的占位符CSS，所以我可以看到它：

.widget-placeholder {
  border: 2px dashed #333;
}

设置可排序对象的JS剪辑：

    $sortableItems = $('> div', '#widgets');

    $sortableItems.find('.widget-head').css({
        cursor: 'move'
    }).mousedown(function (e) {
        $sortableItems.css({width:''});
        $(this).parent().css({
            width: $(this).parent().width() + 'px'
        });
    }).mouseup(function () {
        if(!$(this).parent().hasClass('dragging')) {
            $(this).parent().css({width:''});
        } else {
            $('#widgets').sortable('disable');
        }
    });

    $('.widget').sortable({
        items: $sortableItems,
        connectWith: $('#widgets'),
        handle: '.widget-head',
        containment: $('#widgets'),
        revert: 300,
        delay: 100,
        opacity: 0.8,
        placeholder: 'widget-placeholder',
        containment: 'document',
        forcePlaceholderSize: true,
        start: function (e,ui) {
            $(ui.helper).addClass('dragging');
        },
        stop: function (e,ui) {
            $(ui.item).css({width:''}).removeClass('dragging');
            $('#widgets').sortable('enable');
        }
    });

Answer 1

添加float: left; 到您的占位符类将按正确的顺序将其放在可排序的列中。

.widget-placeholder {
    border: 2px dashed #333;
    float: left;
}