jQuery可排序，带有内嵌块显示划痕 [英] jquery sortable with inline-block display display scratches

问题描述

我正在尝试使用JQuery处理连接的可排序列表，但是，如果我在li CSS中使用display:inline-block，则占位符和放置位置不正确.通常更高，而且物品的大小也要重新调整以引起自动换行.

I'm trying to play with connected sortable list with JQuery, however, if I use display:inline-block in my li CSS, the placeholder and the placement is not correct. It's usually higher, and also the items are resized so that cause wordwrap.

如果我更改display:inline-block by float:left

If I change display:inline-block by float:left here

ul.fieldlist li
{
        display:inline-block;
        list-style-type: none;
}

然后，拖放操作正常，但是由于某些原因，我无法将其拖回原始可排序对象.

Then the dragdrop is working fine, but for some reasons i'm not able to drag back to the original sortable.

我做了一个jsfiddle来显示问题:

I have made a jsfiddle to show the problem:

http://jsfiddle.net/uArNx/5/

这可能是我的填充/边距问题，但我不知道.

It might be a problem with my padding / margins but I couldn't figure out.

任何帮助都将受到欢迎:)

Any help would be welcomed :)

推荐答案

此修复程序为 vertical-align:top .据我所知，JqueryUI Sortables不能很好地处理 vertical-align:middle .

The fix is vertical-align: top. As best I can tell, JqueryUI Sortables don't handle vertical-align: middle well.

尝试在您的jsfiddle中添加vertical-align:top，以解决对齐问题.

Try adding vertical-align: top to your jsfiddle--it clears up the alignment issue.

这里有一些注释，以及对内联代码块的初始修复，但我认为valign中号没有找到. http://bugs.jqueryui.com/ticket/6942

There are some notes here, and an initial fix for inline block, but I think the valign middle case was missed. http://bugs.jqueryui.com/ticket/6942

这篇关于jQuery可排序，带有内嵌块显示划痕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！