使用float:left和display:inline-block的jQuery UI拖放排序比较

Question

我这里有两个例子，唯一的区别是一个使用display:inline-block，另一个使用float:left。 li.doc_item{display:inline-block;} vs li.doc_item{float:left;}

我的问题是，使用display:inline-block排序不如float:left快速或响应灵敏。我想使用display:inline-block，因为我重新排序的缩略图有时会大小不同，当缩略图的高度和宽度不同时，float:left效果不佳。

我的问题是如何使block:inline-block像float:left一样快？

您可以在此处找到比较示例： http://dev-server-2.com/drag-drop-sample/

- Aman

Answer 1

我遇到了同样的问题，想找出原因。

这是因为他们对浮动元素的处理不同，应该在 inline-block 上进行区分。

尝试使用此补丁：

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版本，这仍然是一个问题。

- jishi

---

哇，你真是个天才！使用你的补丁后，display:inline-block的拖放速度与float:left一样快。感谢你的发布，非常感激。干杯，伙计！ - Aman

很高兴能够帮助。请关注此工单：http://bugs.jqueryui.com/ticket/6942，以便及时了解源代码修复情况。 - jishi

发现了类似的问题，http://bugs.jqueryui.com/ticket/8872。通过向.ui-draggable-dragging添加float来解决它。 - denis.peplin

他们声称在jQuery UI 2.0中已经修复了这个问题。 - jishi

Answer 2

对于带有vertical-align:middle; max-height:100%; max-width:100%;的图像，我会使用带有float:left;和text-align:center;的固定大小容器。

无论图像的尺寸如何，它们都将显示为马赛克。

我不知道在你的情况下是否可行？

- MatTheCat

---

固定大小的容器，就像这样。li.doc_item { float:left; width:250px; height:250px; text-align:center; vertical-align:middle; border:1px solid #FFFFFF; cursor:pointer; }li是我的图像容器，这可能适合我...让我试试，谢谢。 - Aman