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

Question

我这里有两个例子，这两个例子之间的唯一区别是一个使用 display:inline-block 另一个使用 float:left,

li.doc_item{display:inline-block;} 对比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/

Answer 1

我遇到了同样的问题，我想我应该找出导致它的原因。

这是因为它们对 float 元素的处理方式不同，因此也应该对 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 开始，这仍然是一个问题。