Question

我这里有两个例子，这两个例子之间的区别仅在于一个使用display：inline-block，另一个使用float：left，

li.doc_item {显示：内联块;} VS li.doc_item {浮动：左;}

我的问题是显示：内联块排序不像float：left那样快或响应。我想使用display：inline-block，因为我正在重新排序的缩略图有时可以改变大小和浮动：当缩略图具有不同的高度和宽度时，左边不能正常工作。

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

你可以在这里找到比较例子： http://dev-server-2.com/drag-drop-sample/

Answer 1

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

这是因为它们对浮动元素的处理方式不同，并且应该在内联块上进行区分。

试试这个补丁：

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

Answer 2

对于float:left;的图片，我会使用包含text-align:center;和vertical-align:middle; max-height:100%; max-width:100%;的固定大小的容器无论尺寸如何，您的图像都会显示为马赛克。

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

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

2 个答案: