可以't使jQuery Sortable在没有列的情况下工作

我一直在为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');
        }
    });