jQuery UI拖放排序比較使用float：left vs display：inline-block

我在這裏有兩個例子，這兩個例子只有一個區別是 display：inline-block和另一個使用float：left，jQuery UI拖放排序比較使用float：left vs display：inline-block

li.doc_item {顯示：內聯塊;} VS li.doc_item {浮動：左;}

我的問題是顯示：內聯塊的排序是不一樣快或響應作爲浮動：左。我想使用display：inline-block，因爲我重新排序的縮略圖有時會在大小和浮動方面有所不同：當縮略圖具有不同的高度和寬度時，左側效果不佳。

任何問題是如何使塊：inline-block與float一樣快：left？

你可以在這裏找到比較例： http://dev-server-2.com/drag-drop-sample/

來源

2010-10-07 Aman

我遇到了同樣的問題，並認爲我應該找出是什麼原因造成的。

這是因爲他們對待浮動元素的方式不同，並且還應該在行內塊上進行區分。

試試這個補丁：

jQuery.ui.sortable.prototype._create = function() { 
    var o = this.options; 
    this.containerCache = {}; 
    this.element.addClass("ui-sortable"); 

    //Get the items 
    this.refresh(); 

    //Let's determine if the items are floating, treat inline-block as floating as well 
    this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) || this.items[0].item.css('display') == 'inline-block' : false; 

    //Let's determine the parent's offset 
    this.offset = this.element.offset(); 

    //Initialize mouse events for interaction 
    this._mouseInit(); 
};

這是特別該行：

this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) || this.items[0].item.css('display') == 'inline-block' : false;

這改變默認的行爲。這是一個遲到的答案，但我無法在網絡上找到任何其他答案，所以我認爲這將有助於很多人。

我會嘗試提交修正此問題的jQuery的修補程序請求，但從1.8.9開始，這仍然是一個問題。

來源

2011-02-04 14:28:22 jishi

WOW你是天才，使用你的補丁顯示後：內聯塊的拖放工作速度浮動：左感謝張貼它，真的很感激它。隊友的歡呼聲！ – Aman 2011-02-05 23:44:00

很高興我能幫到你。留意這張票：http://bugs.jqueryui.com/ticket/6942找出他們何時修復它的來源。 – jishi 2011-02-06 11:06:39

發現有點類似的問題，http://bugs.jqueryui.com/ticket/8872。通過將float添加到.ui-draggable拖動來解決它 – 2012-11-30 10:48:31

我會用一個固定大小的容器float:left;和text-align:center;的圖像與vertical-align:middle; max-height:100%; max-width:100%; 您的圖像將顯示爲馬賽克無論其尺寸。

我不知道在你的情況下是否可能？

來源

2010-10-07 08:07:15 MatTheCat

固定大小的容器哼哼這樣的東西。 li.doc_item float：left; width：250px; height：250px; text-align：center; vertical-align：middle; border：1px solid #FFFFFF;光標：指針; } } li是我的imgs容器，這可能適合我...讓我試試看，thanx – Aman 2010-10-07 22:49:10

jQuery UI拖放排序比較使用float：left vs display：inline-block

回答

相關問題