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

Question

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

//  $("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

Answer 1

你必须注意 css position。

试试这个，它的工作!

var velocity = 1500;

$("button").on("click", function() {
  var pos = $("#parent-block").offset();
  var block2 = $("#block-2").detach();
  $("body").prepend(block2);
  var move = $("#block-2").css({
    "position": "absolute",
    "z-index": "9999",
    "top": pos.top,
    "left": pos.left
  });
  var velocity = "velocity";
  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;
}

#block-2 {
  position: absolute;
  border: 1px solid #f11;
  width: 150px;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Move block</button>
<div id="block-1">
  <p>Block1</p>
</div>

<div id="parent-block">
  <div id="block-2">
    <p>Block2</p>
  </div>
</div>