jQuery的排序捐贈問題時的div浮動

我有下面的標記上我試圖讓jQuery的排序：jQuery的排序捐贈問題時的div浮動

<div> 
    <div id="sortable"> 
     <div style="height:200px;width:400px;border:1px solid black;float:left;">Item 1</div> 
     <div style="height:200px;width:400px;border:1px solid black;float:right;">Item 2</div> 
    </div> 
</div>

以下是我的javascript：

$(function() { 
     $("#sortable").sortable({ 
      placeholder: "ui-state-highlight" 
     }); 
     $("#sortable").disableSelection(); 
    });

如果我刪除花車和允許divs堆疊，它工作正常。隨着浮游物包括在屏幕的每邊1 div，排序不起作用。實際上，使用指定的佔位符樣式，佔位符似乎跨越2個div所在的「行」的整個長度。

任何幫助，非常感謝。

請參閱不工作具有代表性的樣本如下：http://jsfiddle.net/5kx5C/2

來源

2012-06-19 user1466893

可排序的jQuery用戶界面的一部分，你包括jQuery UI的呢？ – ply

是的，對不起。我包含所有相關的腳本：jquery-ui-1.8.21和jquery-1.7.2。 – user1466893

奇怪，這似乎是工作時，我把你的代碼粘貼到jsfiddle。你可以發佈你的其他標記，或當前的代碼到jsfiddle嗎？ – ply

我認爲你需要澄清的#sortable DIV的CSS（本例中假設你收縮你的第1項和第2周的div至300像素寬度，你可能需要調整這些值以滿足您的需求）

#sortable { width: 700px; height: 150px; padding: 0.5em; } 

#item1 { width: 300px; height: 100px; border: 1px solid #444; } 
#item2 { width: 300px; height: 100px; border: 1px solid #444; } 

#sortable > div { float: left; }

這個例子似乎是工作...

http://jsfiddle.net/gefZm/5/

來源

2012-06-19 16:28:03 ply

感謝您的回覆。根據我的佈局要求，我無法浮動兩個div左側。我需要它們均勻間隔並居中在父div中，這會導致類似於以下對您的發佈示例的編輯：http://jsfiddle.net/5kx5C/ – user1466893

爲佔位符添加樣式可進一步定義行爲。現在，當您拖動其中一個項目時，您可以看到佔位符佔用了整個空間，而不僅僅是單個項目的空間：http://jsfiddle.net/5kx5C/2/ – user1466893

嘗試把overflow:hidden;在你的DIV

來源

2014-09-17 18:03:59 iarroyo

jQuery的排序捐贈問題時的div浮動

回答

相關問題