使用CSS將div從父窗口移動到另一窗口

Question

我想將div從源-parent1移動到target-parent2。
唯一的事情是我可以控制div2在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>