我在# .dropzone里面有一个回收站div,当元素被拖入其中时,可以使用.remove()删除它们(使用jquery ui、.droppable和.draggable类):
$('.dropzone').droppable({
tolerance: 'pointer',
accept: 'p',
drop: function(event, ui){
ui.draggable.remove();
$('#trashanim').animate({opacity: '1'}, 'fast')
$('#trashanim').animate({opacity: '0'}, 'slow');
}
});
(#trashanim是由drop事件触发的垃圾桶的简短动画)。
在我尝试使用img之前,它运行得很好:在.dropzone上的drop事件之后,图像将自己定位在左上角,丢失道路中的所有类,并在其标记中获取该位置的属性(当我使用图像进行测试时,我确实更改了ui类的accept参数以能够接收“img”)。该映像不会从其父映像中删除。
我已经实现了事件委派,如this post中所示,但没有结果。
编辑:当我清空()时,父节点将另一个元素拖到#trash中,图像就会从该节点中消失。它看起来可以删除,但当从另一个元素调用时。
发布于 2016-06-06 22:31:17
您说您正在使用img
-所以我假设您正在拖动的元素,它的标签是<img>
也就是说,您的droppable
被设置为只接受<p>
标记。
尝试将accept更改为accept: 'p, img'
发布于 2016-06-07 10:42:30
请提供您的代码的JSFIDDLE,我曾与jsFiddle和jquery UI库可以添加和工作良好。
这是代码,请检查它。
$("img").draggable();
$('#droppable').droppable({
tolerance: 'pointer',
accept: 'p, img',
drop: function(event, ui) {
ui.draggable.remove();
$(this).addClass("ui-state-highlight");
alert("dropped");
}
});
div {
min-width: 200px;
height: 150px;
border: 1px solid red;
display: block;
color: red;
font-weight: bold;
margin:20px;
}
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="droppable">
Dropzone
</div>
<img id="draggable" src="http://dummyimage.com/100x100/000/ffffff.png&text=d+-+raval" alt="test">
<img id="draggable" src="http://dummyimage.com/100x100/000/ffffff.png&text=d+-+raval" alt="test">
<img id="draggable" src="http://dummyimage.com/100x100/000/ffffff.png&text=d+-+raval" alt="test">
发布于 2016-06-07 18:39:56
感谢你的回答@Draval。我终于弄明白了:问题出在'origin‘div上,元素是从这里拖出来的。解决这个问题时,div看起来像这样:
$(document).ready(function(){
$('#tabs-1').droppable({
accept: 'img, p',
drop: function(event, ui){
$('#tabs-1').append(ui.draggable);
ui.draggable.draggable({containment: '#tabs-1'});
}
})
});
我需要div能够接受来自另一个div的元素,这就是为什么我把它设为可删除的原因。这使得它与已经存在的元素发生了冲突(我真的不明白为什么)。此外,我正在处理jquery ui选项卡,并且没有正确指定要设置droppable的元素(它不是('#tabs-1').droppable();
,而只是$('#tabs).droppable()
)。您必须小心使用指定为容器的jquery ui tabs
元素,以及将向其追加ui.draggable
的元素。
为了更清楚起见,我创建了两个独立的函数:一个用于‘原始’目录中已经存在的元素,另一个用于将要附加来自#preview
目录的拖动事件的元素:
$(document).ready(function(){
$('#tabs').droppable({
accept: 'img, p',
})
});
$(document).ready(function(){
$('#tabs').droppable({
accept: '#preview img',
drop: function(event, ui){
var position = ui.draggable.offset();
$('#tabs-1').append(ui.draggable);
ui.draggable.css('position', 'absolute')
ui.draggable.offset(position);
ui.draggable.css('zIndex', '1')
ui.draggable.draggable({containment: '#tabs-1'});
}
})
});
我知道我必须创建一个函数来将元素附加到活动选项卡上,而不是总是附加到#tabs-1
选项卡上,但现在这解决了我的困惑。
感谢你的观点和答案!
https://stackoverflow.com/questions/37667709
复制相似问题