Question

有两个div相互重叠。一个是画布。所以需要积极主动。其他div需要可以删除。所以我在上面创建并将其隐藏起来。但是现在这个可丢弃的div不会检测丢弃事件。任何人都可以帮助我摆脱这种情况。

<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

在'drop'css类中，删除display：none规则。像这样：

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

背景已经是透明的，因此您不需要display：none规则。

这是一个jsFiddle：

www.jsfiddle.net/hydride/j7ud8gLk/

Answer 3

在我隐藏div的情况下，我已应用此代码

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

当div显示我再次申请时

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

将项目拖放到隐藏的div不起作用

3 个答案: