使用float:left与display:inline-block的jQuery UI拖放排序比较 [英] jQuery UI drag/drop sorting comparision using float:left vs display:inline-block

问题描述

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

I have two examples here, only difference between these two example are one uses display:inline-block and other one uses float:left,

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

li.doc_item{display:inline-block;} vs li.doc_item{float:left;}

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

My problem is display:inline-block sorting is not as fast or responsive as float:left. I want to use display:inline-block because thumbnails that I am re-ordering sometimes can vary in size and float:left doesn't work well when thumbnails have different height and width.

任何问题是如何使block:inline-block与float:left一样快?

Any question is how to make block:inline-block as fast as float:left ?

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

You can find comparative example here: http://dev-server-2.com/drag-drop-sample/

推荐答案

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

I came across the same issue, and figured I should find out what's causing it.

这是因为它们对浮动元素的处理方式不同，因此也应在内联代码块中进行区分.

It's because they treat floated elements differently, and that differentiation should be made on inline-block as well.

尝试此修补程序:

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;

这将更改默认行为.这是一个较晚的答案，但是我在网上找不到其他答案，所以我认为这对很多人有帮助.

That changes the default behaviour. This is a late answer, but I couldn't find any other answer around the net so I thought this would help a lot of people.

我将尝试为jQuery提交修补程序请求，以解决此问题，但是从1.8.9版开始，这仍然是一个问题.

I will try to submit a patch-request for jQuery that fixes this, but as of 1.8.9 this is still a problem.

这篇关于使用float:left与display:inline-block的jQuery UI拖放排序比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！