各種高度的jQuery可排序塊

是的，你理解正確，除了你的示例不支持拖入（或者我錯過了什麼？）。我嘗試在[this demo]中添加**。sortable（）**到**＃container **（http://masonry.desandro.com/demos/basic-multi -column.html）但這不起作用，這正是我想要的除了拖放，但沒有DnD它對我無用:( – ink

我想我找到了可排序和可調整大小的砌體的例子[here]（http：// tyler-designs.com/masonry-ui/）在類似的[問題]（http://stackoverflow.com/questions/5141082/jquery-masonry-co nflict-with-jquery-ui-sortable） - 有時它工作不好，但它的工作原理！也許以後有人發帖比我更好，所以我會等待接受你的答案。感謝您的鏈接！ – ink

砌體不起作用。請參閱[神話拖放多欄網格插件]（http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/） – desandro

現在工作我本來使用周圍的短項的第二包裝div的幾乎工作模式。這個bug是在我的FF Win 7中（在IE9中似乎沒有問題），它看到大塊和塊組之間略有高度差異，所以較低的浮點「向上」（如果它是一個大塊）並沒有離開。當我查看Firebug時，FF顯示的計算結果的邊界不是1px，而是0.916667px，所以我不知道這是否是問題（現在在下面修復）。

請參閱http://jsfiddle.net/tnLcg/47/。我最初啓用了在短期持有人之間進行分類的能力，但我認爲正確的功能是做出這樣的交換。也許http://www.eslinstructor.net/demo/swappable/swappable_home.html可能會實現在短持有者堆棧之間工作。

編輯 - 火狐固定：我不停的短支架邊框，但將其設置爲透明的（所以它計算一樣的雙高度框），然後使用內部的元件的相對定位，以調整該和它的工作原理在FF現在對我來說：編輯：改進版本（4列）http://jsfiddle.net/tnLcg/99/。

來源

2011-12-09 18:35:46 ScottS

感謝您的回答，但它仍然無法正常工作。如果我嘗試移動小盒子，他們會崩潰。最重要的是 - 我在jsFiddle上簡化了我的例子，爲什麼只有兩列。所以如果你嘗試使用4列可能塊的行爲將完全不正確。 – ink

@墨水 - 4列工作正常。我確實注意到了佔位符的一些奇怪之處，所以我修改了代碼（javascript和css）以適應（http://jsfiddle.net/tnLcg/99/）。我不確定你的意思是「如果我嘗試移動小盒子，他們會崩潰。」我已經修改了代碼，所以如果你在它們之間點擊，你可以將兩個「塊」移到一起。如果一個小盒子試圖移動到一個大盒子區域，你期望什麼樣的行爲？另外，你是否打算能夠將小盒子位置和其他小盒子位置一起移動？ – ScottS

關於'collapsing'：[prev jsFiddle]（http://jsfiddle.net/tnLcg/63/）[截圖]（http://i.imgur.com/6Xe46.png）。看起來像4列很好，但在你的代碼中，小塊已經手動分組（**。short_holder **）。我不知道用戶會創建什麼，他將爲新塊創建什麼樣的寬度和高度。如何在動態塊添加的情況下管理這些組？ – ink

如果希望兩半能夠獨立移動，他們分成兩列，然後使用connectWith選項，以使它們兩者之間拖動：

http://jsfiddle.net/ujahd/

如果您希望兩半保持組合在一起，然後將它們組合成一個DIV：

http://jsfiddle.net/W5VzD/1/

來源

2011-12-09 20:24:56

您的示例可以使用多列（其中塊的大小可以是父寬度的1/4，1/3，1/2 ... 3/4以及各種高度）？ – ink

你可以通過分組1/4寬度等來使它像你的模擬一樣工作，但是一旦人們開始拖動它將變得混亂。 –

還有this教程，如果你有興趣閱讀它。希望你找到你的答案。

編輯：它不是jquery。

來源

2011-12-14 17:57:51

各種高度的jQuery可排序塊

回答

相關問題