无法让 jQuery Sortable 在没有列的情况下工作

Question

我一直在为 jQuery 的可排序而苦苦挣扎。我最初尝试在 sortable 上关注Nettuts tutorial，但发现仪表板布局的列方法过于狭窄。我想为图形等提供双倍宽度的小部件......所以我有一个固定宽度的父小部件 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;
}