Javascript 使用css将div从一个父级移动到另一个父级

我想将div从source-parent1移动到target-parent2。
唯一的问题是我可以控制parent2上div的偏移量。
我找到了这段代码，并试图修改-添加了一个10px的偏移量。
1.我不明白它为什么失败。
2.我似乎不明白为什么这条线如此重要，它有什么作用

/$（“body”）.prepend（$（“#block-2”）.detach（）；
var速度=1500；
$（“按钮”）。在（“单击”，函数（）{
var pos=$（“#父块”）.offset（）；
$（“body”）.prepend（$（“#block-2”）.detach（）；
var move=$（“#block-2”）.css({
“位置”：“绝对”，
“z指数”：“9999”，
“顶部”：位置顶部，
“左”：位置左
});
var block1=$（“#block-1”）.offset（）；
动({
“顶部”：区块1.top+10，
“左”：区块1.left+10
}，速度，函数（）{
css（{“top”：“10”，“left”：“10”}）；
$（“#block-1”）.prepend（move.detach（））；
});
});
#block-1{
位置：绝对位置；
边框：1px实心#f00；
宽度：150px；
高度：150像素；
右：0；
排名：0；
}
#父块{
位置：绝对位置；
边框：1px实心#00f；
宽度：150px；
高度：150像素；
左：0；
底部：0；
}
#第2区{
位置：绝对位置；
z指数：9999；
背景色：#0f0；
宽度：50px；
高度：50px；
}
钮扣{
位置：绝对位置；
顶部：50px；
}

移动块
你必须小心css
位置

试试这个，它能用


var速度=1500；
$（“按钮”）。在（“单击”，函数（）{
var pos=$（“#父块”）.offset（）；
var block2=$（“#block-2”）.detach（）；
$（“正文”）。预编（第2区）；
var move=$（“#block-2”）.css({
“位置”：“绝对”，
“z指数”：“9999”，
“顶部”：位置顶部，
“左”：位置左
});
var-velocity=“速度”；
var block1=$（“#block-1”）.offset（）；
动({
“顶部”：区块1.top+10，
“左”：区块1.left+10
}，速度，函数（）{
move.css({
“top”：“10”，
“左”：“10”
});
$（“#block-1”）.prepend（move.detach（））；
});
});
#block-1{
位置：绝对位置；
边框：1px实心#f00；
宽度：150px；
高度：150像素；
}
#第2区{
位置：绝对位置；
边框：1px实心#f11；
宽度：150px；
高度：150像素；
}

移动块
区块1

区块2

请参见此，以了解解决此问题的良好方法。您好，我看到了这一点，但prepend（）没有任何用处，detach（）的最终目标是什么？移动div并分离，然后在移动后重新连接它确实，我在代码段中更改了它！我的意思是，如果你想改变这样的元素，整个css的位置都要小心。如果这是公认的答案，那就太好了：）