将物品拖放到隐藏的div不起作用

Question

有两个div彼此重叠。一个是画布。所以它需要积极。其他div需要可以丢弃。所以我在上面创建它并隐藏起来。但是现在这个可放弃的div没有检测到丢弃事件。任何人都可以帮助我摆脱这种情况。

here is fiddle

<div class="container"> 
    <div class="drop" id="drop"> 

    </div> 
    <div class="canvas-wrapper"> 
    <h1> 
    I need this area to be usable for canvas.So above div is hidden. 
    </h1> 
    </div> 
</div> 
<div style="margin:0 auto; clear:both;overflow:hidden;"> 
    <img src="http://placehold.it/150x150"> 
    <img src="http://placehold.it/150x150"> 
    <img src="http://placehold.it/150x150"> 
</div> 

var $drop = $('#drop'); 
$(document).ready(function(){ 
    $('img').draggable({ 
    revert: true, 
    helper: 'clone', 
    appendTo: 'body', 
    containment: 'document', 
    refreshPositions: true 
    }); 
    $drop.droppable({ 
     over: function (event, ui) { 
      $(this).addClass('active'); 
     }, 
     drop: function (event, ui) { 
      $('#drop').append(ui.draggable); 
     }, 
     out: function (event, ui) { 
      $(this).removeClass('active'); 
     }, 
     deactivate: function (event, ui) { 
      $(this).removeClass('active'); 
     } 
    }); 
}); 

.container { 
    width:100%; 
    height:100%; 
    postion:relative; 
} 
.drop { 
    display:none; 
    position: absolute; 
    width:600px; 
    height:300px; 
    background:transparent; 
} 
.canvas-wrapper { 
    width:600px; 
    height:300px; 
    overflow:hidden; 
    float:none; 
    border:1px solid #000000; 
} 
.active { 
    background-color:#FFF; 
    opacity:0.5; 
} 

Answer 1

问题出在HTML引擎是如何呈现的DOM内容。如果您将.drop设置为display: none，则会将其大小报告为0，因为它确实不占用任何可见空间。

尝试使用visibility: hidden，而不是display:none

A Demo for you

Answer 2

在你的 '降' 的CSS类，去掉显示：无规则。像这样：

.drop { 
    position: absolute; 
    width:600px; 
    height:300px; 
    background:transparent; 
} 

背景已经是透明的，所以你不需要显示：无规则。

这里是一个的jsfiddle：

www.jsfiddle.net/hydride/j7ud8gLk/

Answer 3

在我的情况下，当DIV是隐藏的，我有使用这个代码

$(".selector").draggable("destroy"); 

当DIV显示我有再次申请

$(".selector").draggable();