我的页面中有两个div,div1包含3个可放置的图像(p1,p2,p3),div2包含3个可拖动的图像(g1,g2,g3):每个gi可以放在任何pi上,它应该坚持可放置项目的左上角。如果它没有落在pi上,它应该返回到原来的位置。在被丢弃之后,gi可以再次被拖动并掉到另一个pi。但是,每个droppable一次只能保留一个可用的。
我的代码是:
<style>
#div1, #div2 {
position:relative;
width:500px;
height:500px;
border:3px solid black;
}
.drag,.drop,.over {
position:absolute;
width:30px;
height:30px;
}
.drop {
border:1px solid green;
}
.over {
border:1px solid gray;
}
</style>
<script>
$(document).ready(function () {
$(function() {
$('.drag').draggable({
cursor: 'move',
helper:'clone'
});
$('.drop').droppable({
over: function() {
$(this).removeClass('.drop').addClass('over');
},
out: function() {
$(this).removeClass('over').addClass('drop');
},
drop: function(ev, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
if ($(this).children().length > 0) return false;//each droppable just keep one draggable
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);//stick to the left corner of droppable
//$(this).append($(ui.draggable).clone());
$(this).removeClass('over').addClass('drop');
}
});
});
$('body').append("<div id='div1'></div>");
$('body').append("<div id='div2'></div>");
$('#div1').append("<img id='p1'class='drop' style='width:50; height:50; top: 50px; left:50px;' src='images/1.jpg'></img>");
$('#div1').append("<img id='p2'class='drop' style='width:50; height:50; top:250px; left:50px;' src='images/2.jpg'></img>");
$('#div1').append("<img id='p3'class='drop' style='width:50; height:50; top:350px; left:50px;' src='images/3.jpg'></img>");
$('#div2').append("<img id='g1'class='drag' style='width:50; height:50; top: 50px; left:50px;' src='images/11.jpg'></img>");
$('#div2').append("<img id='g2'class='drag' style='width:50; height:50; top:250px; left:50px;' src='images/12.jpg'></img>");
$('#div2').append("<img id='g3'class='drag' style='width:50; height:50; top:350px; left:50px;' src='images/13.jpg'></img>");
});
</script>
我的问题:当我在一个pi上放一个gi时,gi就消失了(因此,我不能将它拖放到另一个项目上,它不会粘在相应pi的左下角)。我怎样才能防止它消失?并把它贴在可放置的物体上?
(如果我删除“$(已删除).detach()。css({top:0,left:0})。appendTo(droppedOn);”和“helper:clone”,gi在删除后不会消失,但它可以自由移动。)
答案 0 :(得分:2)
我刚刚通过转换解决了这个问题
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
到
$(ui.draggable).detach().appendTo('#div1').css({top: $(this).position().top,left: $(this).position().left,width:30,height:30});
感谢。