javascript - 将 dom 中的 child 附加到另一个 div 中，但要保持在同一位置

Question

单击黄色 div 时我有 2 个元素我想将红色方 block 放在那个黄色 div 中，但要保持在相同位置(单击黄色元素时红色不能改变位置)原来是。这只是我做的事情的一个例子，两个元素都是 position: absolute，所以它应该保持这样。有没有办法做到这一点？ http://jsfiddle.net/9t6n8dmk/25/

编辑:我说过我需要两个元素都是绝对的。

<div class="square" id="square">
</div>

<span class="image" id="image">
</span>

.square{
  position:absolute;
  height:50px;
  width:50px;
  left:100px;
  top:100px;
  background:yellow;
}
.image{
  position:absolute;
  height:50px;
  width:50px;
  left:100px;
  top:10px;  
  background: red;
}

let square = document.getElementById("square");
let image = document.getElementById("image");

square.addEventListener("mousedown", function(){
    square.appendChild(image);
})

Answer 1

当你将一个元素移动到另一个父元素时，你必须重新计算元素相对于新父元素的位置:

let square = document.getElementById("square");
let image = document.getElementById("image");

square.addEventListener("mousedown", function() {
  if (image.parentElement !== square) {
    image.style.top = (image.offsetTop - square.offsetTop) + 'px';
    image.style.left = (image.offsetLeft - square.offsetLeft) + 'px';
    square.appendChild(image);
  }
})

.square {
  position: absolute;
  height: 50px;
  width: 50px;
  left: 100px;
  top: 100px;
  background: yellow;
}

.image {
  position: absolute;
  height: 50px;
  width: 50px;
  left: 100px;
  top: 10px;
  background: red;
}

<div class="square" id="square">
</div>

<span class="image" id="image">
</span>