如何在javascript中移動一個div與另一個div

我試圖製作一個帶有兩個框的Web應用程序，一個包含在另一箇中。用戶應該能夠點擊並移動內框，但是用戶不應該能夠將該框移動到外框的範圍之外。用戶可以通過將內盒拖動到外盒的一個邊緣來移動外盒。我知道如何移動內部盒子，但問題是如何移動另一個盒子的限制。有人可以幫我嗎？這是我到目前爲止所做的：如何在javascript中移動一個div與另一個div

<!doctype html> 
<head> 
<title>JavaScript Game</title> 
<style> 
#container { 
height:400px; 
width:600px; 
outline: 1px solid black; 
position:absolute; 
left:50px; 
top: 0px; 
background-color:green; 
} 
#guy { 
position:absolute; 
height:50px; 
width:50px; 
outline: 1px solid black; 
background-color:red; 
left: 200px; 
top: 200px; 
} 
</style> 
</head> 
<body> 

<div id="container"></div> 
<div id="guy"></div> 
<script> 
var guy=document.getElementById("guy"); 
var cont=document.getElementById("container"); 
var lastX,lastY; // Tracks the last observed mouse X and Y position 


guy.addEventListener("mousedown", function(event) { 
    if (event.which == 1) { 
     lastX = event.pageX; 
     lastY = event.pageY; 
     addEventListener("mousemove", moved); 
     event.preventDefault(); // Prevent selection 
    } 
    }); 

function buttonPressed(event) { 
    if (event.buttons == null) 
     return event.which != 0; 
    else 
     return event.buttons != 0; 
    } 
    function moved(event) { 
    if (!buttonPressed(event)) { 
     removeEventListener("mousemove", moved); 
    } else { 
     var distX = event.pageX - lastX; 
     var distY = event.pageY - lastY;  
     guy.style.left =guy.offsetLeft + distX + "px"; 
     guy.style.top = guy.offsetTop + distY + "px"; 
     lastX = event.pageX; 
     lastY = event.pageY; 
    } 
    } 

</script> 
</body>

來源

2016-10-14 scott green

您可以添加一個檢查，看看移動該框是否會打破cont的限制。

嘗試使用getBoundingClientRect（）

請查看以下運行的代碼片段。

全屏查看最佳效果。

var guy=document.getElementById("guy"); 
 
var cont=document.getElementById("container"); 
 
var lastX,lastY; // Tracks the last observed mouse X and Y position 
 

 

 
guy.addEventListener("mousedown", function(event) { 
 
    if (event.which == 1) { 
 
     lastX = event.pageX; 
 
     lastY = event.pageY; 
 
     addEventListener("mousemove", moved); 
 
     event.preventDefault(); // Prevent selection 
 
    } 
 
    }); 
 

 
function buttonPressed(event) { 
 
    if (event.buttons == null) 
 
     return event.which != 0; 
 
    else 
 
     return event.buttons != 0; 
 
    } 
 
    function moved(event) { 
 
    if (!buttonPressed(event)) { 
 
     removeEventListener("mousemove", moved); 
 
    } else { 
 
     var distX = event.pageX - lastX; 
 
     var distY = event.pageY - lastY;  
 
     guy.style.left =guy.offsetLeft + distX + "px"; 
 
     guy.style.top = guy.offsetTop + distY + "px"; 
 
     
 
     // ******************************************************************** 
 
     // get bounding box borders 
 
     var contBounds = guy.getBoundingClientRect(); 
 
     var guyBounds = cont.getBoundingClientRect(); 
 
     
 
     // check bottom bounds 
 
     if (contBounds.bottom >= guyBounds.bottom){ 
 
     \t cont.style.top = cont.offsetTop + distY + "px"; 
 
     } 
 
     
 
     // check top bounds 
 
     if (contBounds.top <= guyBounds.top){ 
 
     \t cont.style.top = cont.offsetTop + distY + "px"; 
 
     } 
 
     
 
     // check left bounds 
 
     if (contBounds.left <= guyBounds.left){ 
 
     \t cont.style.left = cont.offsetLeft + distX + "px"; 
 
     } 
 
     
 
     // check right bounds 
 
     if (contBounds.right >= guyBounds.right){ 
 
     \t cont.style.left = cont.offsetLeft + distX + "px"; 
 
     } 
 
     \t // ******************************************************************** 
 
     
 
     lastX = event.pageX; 
 
     lastY = event.pageY; 
 
    } 
 
    }

#container { 
 
height:300px; 
 
width:300px; 
 
outline: 1px solid black; 
 
position:absolute; 
 
left:50px; 
 
top: 0px; 
 
background-color:#CCC; 
 
} 
 
#guy { 
 
position:absolute; 
 
height:50px; 
 
width:50px; 
 
outline: 1px solid black; 
 
background-color:#000; 
 
left: 200px; 
 
top: 200px; 
 
}

<div id="container"></div> 
 
<div id="guy"></div>

來源

2016-10-14 05:26:39 Icewine

謝謝，但你的「if」聲明效果不好，我已經嘗試了很多if語句，至今沒有運氣 –

已修復，如果我明白你想要這個作品。在片段中放一下。 – Icewine

@Icewine解決方案也適用於我，可能是您的瀏覽器。 –

嘗試此鏈接，讓你開始儘可能保持「傢伙」的「contatiner」裏面：http://www.w3schools.com/html/html5_draganddrop.asp 他們的例子展示瞭如何讓一個元素只是另一個元素內下降。

只要移動容器...我會認爲，你可以添加一些如果else語句到移動的函數，將測試對conatiner的大綱的人的位置，並說當他們見面移動容器也是如此。

我自己對javascript很新，但這只是一個我認爲我理解它的建議。

來源

2016-10-14 05:44:58

如何在javascript中移動一個div與另一個div

回答

相關問題