jquery - 将元素拖放到隐藏的 div 不起作用

Question

有两个 div 彼此重叠。一种是 Canvas 用的。所以它需要活跃。其他 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