停止 <div> 在 jQuery ui droppable drop 事件上移动

【问题标题】：Stop <div> moving on jQuery ui droppable drop event停止 <div> 在 jQuery ui droppable drop 事件上移动
【发布时间】：2012-04-20 04:29:07
【问题描述】：

这就是我要说的：

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

当我拖放可拖动对象时，它会更改 div 可拖放对象在页面上的位置。似乎应该有一个简单的解决方案，但我似乎无法弄清楚，也无法向谷歌询问正确的问题。有什么帮助吗？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

这似乎只是一个 CSS 问题。

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

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

更改您的 Dropbox CSS 以反映以下内容：

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

【讨论】：

【解决方案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 上对其进行了测试，它对我有用。

【讨论】：