是否可以將Bootstrap的流體網格佈局系統與jQuery UI的可排序功能結合使用？

我有一個流體引導程序佈局，其中有三個span4在行流體div內。這看起來和我所期望的方式工作。在行元素上調用.sortable();的作品，但在拖動過程中，佈局變得奇怪地不可預知。這是一個鏈接：http://jsfiddle.net/dhilowitz/CwcKg/15/。如果您抓住項目＃3並向左移動，則其行爲與我期望的完全相同。然而，如果抓住物品＃1並將其向右移動，則所有地獄破碎看起來和物品＃3移動到下一行。是否可以將Bootstrap的流體網格佈局系統與jQuery UI的可排序功能結合使用？

的jsfiddle：http://jsfiddle.net/dhilowitz/CwcKg/15/

HTML：

<div class="container-fluid"> 
    <div class="row-fluid sortme"> 
     <div class="span4 element"><h2>Item #1</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div> 
     <!--/span--> 
     <div class="span4 element"><h2>Item #2</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div> 
     <!--/span--> 
     <div class="span4 element"><h2>Item #3</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div> 
     <!--/span--> 
    </div> 
    <!--/row--> 
</div> 
<!--/.fluid-container-->

的Javascript：

$(".row-fluid").sortable();

CSS：

.element > h2 { 
    cursor:pointer; 
    background-color:#cccccc; 
    border-radius:5px; 
    padding: 0px 5px; 
}

來源

2013-07-01 DavidH

這個問題似乎是在.container-fluid類中，引導程序的CSS有導致問題的左右填充。

這是bootstrap.min.css的規則：

.container-fluid { 
    padding-right: 20px; 
    padding-left: 20px; 
}

你可以利用這個新的規則嘗試，在符合這個職位：Jquery UI sortable with bootstrap bugs：

.ui-sortable-placeholder { 
    margin-left: 0 !important; 
} 

.container-fluid { 
    padding-right: 0; 
    padding-left: 0; 
}

如果你需要一些額外的填充，你可以把你的代碼放在外部div中。

好的代碼

來源

2013-07-02 17:09:17

謝謝！它運作良好！ – DavidH

我不喜歡這個解決方案，因爲在刪除排序之後填充相對跳轉：http://jsfiddle.net/CwcKg/31/。 –

雖然我接受上面的答案，我想提供，我想出了在此期間，我想可能是在調試其他的jQuery + Twitter的引導碰撞有益的解決方案。相反，應用的利潤率左到所有的.ui-排序佔位符，我的開始事件過程中應用它們和排序的停止事件中刪除它們。我還用appendTo指定的助手應該被追加到文檔正文，而不是內部的row-fluid。

CSS

.real-first-child { 
    margin-left:0 !important; 
}

的Javascript

$(".row-fluid").sortable({ 
    placeholder: 'span4', 
    helper: 'clone', 
    appendTo: 'body', 
    forcePlaceholderSize: true, 
    start: function(event, ui) { 
     $('.row-fluid > div.span4:visible:first').addClass('real-first-child'); 
    }, 
    stop: function(event, ui) { 
     $('.row-fluid > div.real-first-child').removeClass('real-first-child'); 
    }, 
    change: function(event, ui) { 
     $('.row-fluid > div.real-first-child').removeClass('real-first-child'); 
     $('.row-fluid > div.span4:visible:first').addClass('real-first-child'); 
    } 
});

鏈接：http://jsfiddle.net/dhilowitz/s7Kch/

來源

2013-07-06 11:42:13 DavidH

您先生是天才謝謝謝謝謝謝<3 –

這真的幫了我。非常感謝你。 –

我很喜歡純粹的CSS解決方案，但是我找不到合適的邏輯......這種方法非常好，所以很大。如果有人想讓助手保持在同一個父級（保留樣式），則嘗試移除'placeholder'和'appendTo'參數，並添加樣式'.row-fluid> .ui-sortable-helper {margin-left ：0}' - 它**應該**仍然有效！ –

是否可以將Bootstrap的流體網格佈局系統與jQuery UI的可排序功能結合使用？

回答

相關問題