Stop <div> moving on jQuery ui droppable droppable事件

Question

这就是我要说的：

http://jsfiddle.net/m5Tse/1/

当我拖放可拖放对象时，它会改变div可拖放对象在页面上的位置。似乎应该有一个简单的解决方案，但我似乎找不到答案，也不能问谷歌合适的问题。有什么帮助吗？

Answer 1

这似乎只是一个CSS问题。

尝试将.box更改为float:left而不是display:inline-block

.box{
    /*display: inline-block;*/
    float:left;
    ...

更改dropbox css以反映以下内容：

.dropbox{
    /*height: 100%;*/
    height:200px;
}

Answer 2

将相对位置添加到.box，将绝对位置添加到.dropbox，然后让.dropbox显式地使用宽度和高度填充.box。

.box{
    position: relative;
    display: inline-block;
    margin: 10px 0px;
    width: 200px;
    height: 200px;
    background: #f0f0f0;
    border: 1pt solid black;
}

.dropbox{
    position: absolute;
    height: 100%;
    width: 100%;
}​

我在你的js-fiddle上测试了它，它对我很有效。