可排序不能用於不同高度的色譜柱

我與以下圖書館合作：HTML5 Sortable Drag and Drop。可排序不能用於不同高度的色譜柱

我使用它爲塊，2列寬。其標記：

<ul class="sortable grid"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li style="height: 200px;">Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li style="height: 200px;">Item 7</li> 
    <li>Item 8</li> 
</ul>

雖然我有問題。當某些塊有不同的高度時，我需要在第二個塊之後以某種方式清除float，以免混亂佈局。

bad

有一個現場演示，在這裏工作http://jsfiddle.net/jasondavis/4njSE/6/，如果任何人有任何想法。我嘗試使用Odd li列表項中的選擇器做.sortable>:nth-child(odd) {clear:left}，並且這種方法在外觀上很明智，但是它拖動了拖放的功能，當您放置物品時，它們將無法進入正確的位置。

這的jsfiddle顯示它與.sortable>:nth-child(odd) {clear:left}工作添加http://jsfiddle.net/jasondavis/4njSE/7/

和想法？我現在虧本了。

我也嘗試過包裝每個2塊內有自己的容器，這有助於但隨後拖放不能正常工作，因爲庫添加到容器div dragable。

這是目標，它應該如何看的圖像：

good

來源

2013-03-17 JasonDavis

「活的工作演示」在哪裏？ – OpherV 2013-03-17 22:29:03

@OpherV對不起，這是一個不工作像不良形象http://jsfiddle.net/jasondavis/4njSE/6/和這個看起來「正確」使用'.sortable>：nth孩子（奇數） {clear：left}'，但不能很好地工作，只要拖放位置http://jsfiddle.net/jasondavis/4njSE/7/ – JasonDavis 2013-03-17 23:15:49

這裏，我們去：

第一 - 在working jsfiddle example 。

基本上，我已經爲插件添加了兩個事件回調：onStartDrag和onEndDrag。這些函數依次調用addFloats函數，這是一個簡單的函數，用於爲奇數元素添加浮點數，而這些元素不是而是sortable-dragging元素（這是純CSS無法實現的）。調用可排序插件時，我們也必須調用該函數，但這就是它。

享受:)

來源

2013-03-18 18:54:56 OpherV

嘿，非常感謝你，這更接近我想要的。正如你可能已經注意到它仍然有一個奇怪的行爲，我認爲如果佔位符類的高度與被移動的盒子的高度相同，它會更好。在JS內部，我看到它有一個部分，我認爲它應該這樣做，但顯然這在默認代碼中不起作用。你會不會知道如何解決這個問題？感謝你的貢獻，謝謝！ – JasonDavis 2013-03-18 19:25:44

完成。看看'placeholder.css（「height」，$（this））。height（）+「px」）;' – OpherV 2013-03-18 20:09:32

嘿，你真是太棒了，你很善良，能幫助我，我更喜歡PHP編碼器。如果你從這個位置開始http://codedevelopr.com/screenshots/2013-03-18_16-34-40.png ，然後將項目3移到這樣的右列 http://codedevelopr.com/screenshots /2013-03-18_16-35-52.png 而不是顯示在右列中的佔位符顯示在左列..只是一個奇怪的問題。我不確定這個代碼的工作方式甚至可以修復。我不指望你能解決這一切，但也許你可以告訴我這是否可能。非常感謝您的幫助，將您的答案標記爲最好的 – JasonDavis 2013-03-18 20:42:12

添加這個CSS：

.sortable>:nth-child(odd) {clear:left}

來源

2013-03-17 21:41:31

你好，我已經嘗試過，但它拖動拖放功能順序 – JasonDavis 2013-03-17 21:44:14

可排序不能用於不同高度的色譜柱

回答

相關問題