jQuery UI Sortable 下推项目

Question

我在解决这个问题时遇到了一些麻烦。我查看了其他一些相关问题，但这些解决方案都不适合我。

this.$el.sortable({
    placeholder: 'ui-state-highlight',
    connectWith: '.connectedList',
    dropOnEmpty: true
});

尽管尝试了其他解决方案中发布的一些 CSS 技巧，但这些项目仍然被推下，如下图所示:

您可以在此处查看代码示例:http://jsfiddle.net/jxFBj/1/

Answer 1

我想说问题的根源是内联元素的垂直对齐，默认情况下是基线。尽管内联和(内联) block 元素的混合以及边距的使用最终引发了问题。我想问题的真正根源是什么是有争议的。

不管怎样，我不能确定发生了什么，但对我来说，占位符(没有内联内容)看起来改变了基线的位置(不确定到底为什么)，所以占位符的位置默认情况下是内联元素的图像也会发生变化。

有几种方法可以解决这个问题:

使图像 block 元素:

.sortableList-item img {
    display: block;
}

更新 (13.01.2015):对于最近的浏览器，display 技巧似乎与 vertical- 存在相同的问题对齐 下面提到的一种，即元素水平移动。

http://jsfiddle.net/jxFBj/2/

使用 float 元素而不是内联 block :

.ui-state-highlight {
    float: left;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.sortableList-item {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
}

http://jsfiddle.net/jxFBj/3/

将垂直对齐方式更改为 top 也可以，但当列表元素跨越多行时会导致水平移动，因此这可能不是一个选项:

.ui-state-highlight {
    height: 100px;
    width: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align: top;
}

.sortableList-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    vertical-align: top;
}

http://jsfiddle.net/jxFBj/4/