無法讓jQuery Sortable在沒有列的情況下工作

我一直在努力用jQuery排序。我最初試圖按照Nettuts tutorial排序，但發現儀表板佈局的列方法過於狹窄。我想要雙倍寬度的圖形等小部件...所以我有一個固定寬度的父窗口小部件div，不使用列。固定的寬度可以適合2個常規小部件，或1個雙寬部件。這些小部件只是很好地包裝在容器中，我只想對小部件的訂單進行排序。無法讓jQuery Sortable在沒有列的情況下工作

我遇到的問題是可排序的行爲。我可以對小部件進行拖放和排序，但當發生點擊和拖動時，佔位符不在正確的位置。如果我抓住底部的窗口小部件句柄並將其移動，則佔位符將顯示在頂部及其小部件容器（#widgets）的寬度，而不是窗口部件本身。我可以看到列的佔位符可能會從列中獲得寬度，但在我的情況下，即使左/頂位置也不正確。佔位符就在widget容器的頂部。

加上動畫總是將小部件移動到小部件容器的左上角。就像它認爲插入點或前一個位置是左上角，而不是它插入的位置或之前的位置。

我知道我在這裏錯過了一些東西。我試着改變可排序方法的附加位置，但它不會改變任何東西。任何幫助，將不勝感激！

呈現的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'); 
     } 
    });

來源

2012-03-24 garlicman

將float: left;添加到您的佔位符類將它放置在您的可排序列中正確的順序。

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

來源

2012-07-03 01:47:49

無法讓jQuery Sortable在沒有列的情況下工作

回答

相關問題