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

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

li.doc_item {display：inline-block;}
 与
li.doc_item {float：left;}

我的问题是显示：行内块排序不如float：left那样快或响应速度快.
我要使用display：inline-block,因为我要重新排序的缩略图
有时大小和浮动可能会有所不同：缩略图的高度和宽度不同时,left效果不佳.

任何问题是如何使block：inline-block和float：left一样快？

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

最佳答案

我遇到了同样的问题,并认为应该找出是什么原因造成的.

这是因为它们对浮动元素的处理方式有所不同,因此也应在内联块上进行区分.

试试这个补丁：

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版开始,这仍然是一个问题.