jQuery UI Sortable推送项目

Question

我遇到了解决这个问题的麻烦.我看了一些其他相关的问题,但这些解决方案都没有对我有用.

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

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

例如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/