我需要能够获取一个设置为draggable的元素,并将该元素物理移动到容器中,而不是像当前功能那样覆盖它。
例如:
<div class="container"></div>
<div class="image">
<img class="thumb" src="images/Koala.jpg" alt="" />
</div>
$(function () {
$(".image").draggable();
$(".container").droppable({
drop: function (event, ui) {
alert('dropped!');
}
});
});
因此,在将图像拖放到“容器”div中之后,我需要将实际的html元素移动到那里。
事件发生后,如果我使用Chrome的开发工具查看源代码,我会看到:
<div class="container">
<div class="image">
<img class="thumb" src="images/Koala.jpg" alt="" />
</div>
</div>
这可能吗?
由于
答案 0 :(得分:6)
这应该将拖动的元素移动到dom树中的droppable。
drop: function (event, ui) {
$(this).append(ui.draggable);
}
答案 1 :(得分:3)
在投放功能中,$(this)
是可接受拖放的droppable,因此只需使用.append()
将可拖动添加到droppable:http://jsfiddle.net/saluce/P6TjC/
$(function () {
$(".image").draggable({helper: 'original'});
$(".container").droppable({
drop: function (event, ui) {
$(this).append(ui.draggable.css({position: 'static'}));
alert('dropped!');
}
});
});