Jquery溢出：隐藏区域可拖放

嗨，我面临使用jQuery拖放的问题

此处溢出隐藏区域不工作。当我在放置区域外拖放时。它会被击中并显示一条“掉下来”的信息

HTML:

CSS:

请找到下面的链接

---

尝试将可拖放事件绑定到.dropcont而不是.droppable

$(function() {
    $( "#draggable" ).draggable();
    $( ".dropcont" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});

---

尝试将可拖放事件绑定到.dropcont而不是.droppable

$(function() {
    $( "#draggable" ).draggable();
    $( ".dropcont" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});

---

删除

div

contain类

dropcont

，因为这会阻止

droppable

感测右aria

HTML:

将我拖到目标位置

放在这里

放在这里

---

查找解决方案

删除

div

包含类

dropcont

，因为这会阻止

droppable

感测右aria

HTML:

将我拖到目标位置

放在这里

放在这里

---

查找解决方案

感谢您的回复，在容器（.dropcont）中它有多个div（.droppable），因此上述代码对我的情况不起作用。@B.p那么您可能需要添加一个空的同级div。感谢您的回复，在容器（.dropcont）中它有多个div（.droppable）因此上述代码对我的情况不起作用。@B.P那么您可能需要添加一个空的同级div。

#container {
    background: #DDD;
    height: 260px;
    position: relative;
}

#draggable { 
    background: #78BA91;
    width: 100px; 
    height: 100px; 

    float: left; 

}

.dropcont{
    left:200px;
     width: 150px; 
      height: 150px; 
    display:inline-block;
   overflow:hidden;

}

.droppable { 
    background: #6B7B95;
    width: 600px; 
    height: 600px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px; 


}

$(function() {
    $( "#draggable" ).draggable();
    $( ".dropcont" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});

<div id="container">

<div id="draggable"> 
    <p>Drag me to my target</p> 
</div> 

<div class="droppable"> 
    <p>Drop here</p> 
</div>
<div class="droppable"> 
    <p>Drop here</p> 
</div>