Question

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

这里溢出隐藏区域不起作用。当我拖放到掉落区域外。它被击中并显示一条消息“掉线！”

HTML：

<div id="draggable"> 
    <p>Drag me to my target</p> 
</div> 
<div class="dropcont">
      <div class="droppable"> 
          <p>Drop here</p> 
      </div> 
</div>

JS：

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

CSS：

#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; 


}

请找到以下链接

http://jsfiddle.net/mL338128/2/

Answer 1

尝试将drop dropable事件绑定到.dropcont而不是.droppable。

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

Answer 2

删除div包含类dropcont，因为这会阻止droppable感知到正确的咏叹调。

HTML：

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

查找解决方案http://jsfiddle.net/mL338128/3/

Jquery溢出：隐藏区域可以删除

2 个答案: