我想将div从源-parent1移动到target-parent2。
唯一的事情是我可以控制div2在parent2上的偏移量。
我有这个代码,我发现并试图改变 - 添加一个10px的偏移量。
1.我不明白为什么它失败。
2.我似乎无法弄清楚为什么这条线很重要,它有什么作用?使用CSS将div从父窗口移动到另一窗口
// $("body").prepend($("#block-2").detach());
var velocity = 1500;
$("button").on("click", function(){
var pos = $("#parent-block").offset();
$("body").prepend($("#block-2").detach());
var move = $("#block-2").css({
"position": "absolute",
"z-index": "9999",
"top": pos.top,
"left": pos.left
});
var block1 = $("#block-1").offset();
move.animate({
"top": block1.top + 10,
"left": block1.left + 10
}, velocity, function(){
move.css({"top":"10","left":"10"});
$("#block-1").prepend(move.detach());
});
});
#block-1 {
position: absolute;
border: 1px solid #f00;
width: 150px;
height: 150px;
right: 0;
top: 0;
}
#parent-block {
position: absolute;
border: 1px solid #00f;
width: 150px;
height: 150px;
left: 0;
bottom: 0;
}
#block-2 {
position: absolute;
z-index: 9999;
background-color: #0f0;
width: 50px;
height: 50px;
}
button {
position: absolute;
top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block-1"></div>
<div id="parent-block">
<div id="block-2"></div>
<button>Move block</button>
</div>
http://jsfiddle.net/shantiS2007/taug59wy/?utm_source=website&utm_medium=embed&utm_campaign=taug59wy
看到这个[Q&A](http://stackoverflow.com/questions/26650877/move-an-element-from-one-div-to-another-div-with在动画效果上点击按钮),这是一个很好的方法。 –
嗨,我看到这个,但没有使用prepend(),detach() –
什么是最终目标? –