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;
}

无法使jQuery Sortable无法使用列

1 个答案: