将物品拖放到隐藏的div不起作用
问题描述:
有两个div彼此重叠。一个是画布。所以它需要积极。其他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;
}
答
问题出在HTML引擎是如何呈现的DOM内容。如果您将.drop
设置为display: none
,则会将其大小报告为0
,因为它确实不占用任何可见空间。
尝试使用visibility: hidden
,而不是display:none
答
在你的 '降' 的CSS类,去掉显示:无规则。像这样:
.drop {
position: absolute;
width:600px;
height:300px;
background:transparent;
}
背景已经是透明的,所以你不需要显示:无规则。
这里是一个的jsfiddle:
答
在我的情况下,当DIV是隐藏的,我有使用这个代码
$(".selector").draggable("destroy");
当DIV显示我有再次申请
$(".selector").draggable();
感谢您的明确答案。学到了新东西。 – Dan
随时...快乐编码.. :) –