Question

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

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

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

example http://img541.imageshack.us/img541/9163/examplepm.png

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

Answer 1

我会说问题的根源是内联元素的垂直对齐，默认情况下是基线。虽然它是内联和（内联）块元素的混合，但使用边距最终会触发问题。我想问题的实际来源是有争议的。

无论如何，我无法确定发生了什么，但对我而言，它看起来像占位符（没有内联内容）改变了基线的位置（不确定为什么确切），所以它的位置默认情况下为内嵌元素的图像也会发生变化。

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

制作图像块元素：

.sortableList-item img {
    display: block;
}

更新（2015年1月13日） ：对于最近的浏览器，display技巧似乎与下面提到的vertical-align问题有同样的问题，即元素确实水平移动。

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

使用浮动元素代替内联块：

.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/

jQuery UI Sortable推送项目

1 个答案: