๐ป์์ 1๊ฐ Drag & Drop๐ป
Drag & Drop : ๊ฐ์ฒด ์ด๋ ์ธํฐํ์ด์ค
body์ onmousedown, onmousemove, onmouseup ์ด๋ฒคํธ๋ก ์ ์ฉํ๋ค.
๐ป๋ฒ์ 1. position : absolute๐ป
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 150px;
height: 150px;
position: absolute;
left: 0;
top: 0;
background-color: gold;
}
</style>
</head>
<body>
<div id="box1" class="box"></div>
<p>drag&drop์ ๊ตฌํํฉ๋๋ค.</p>
</body>
</html>
๋น ํ๋ฉด ํด๋ฆญ ๋ฐฉ์ง
๋น ํ๋ฉด์์ ๋๋๊ทธ๋ฅผ ํ์ ๋, ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๋๋ฅธ ๋์์ด ๋น ํ๋ฉด์ธ์ง, ์์์ธ์ง ํ์ธ๋ค.
window.onmousedown = function() {
if (event.target.id == 'box1') {
isDown = true;
}
};
ํด๋ฆญํ ์์น๋ก ๋ฌด๊ฒ ์ค์ฌ๋๊ธฐ
window.onmousedown = function() {
//์์์ ์ด๋ ๋ถ๋ถ์ ๋๋ ๋์ง ์ ์ฅํ๋ค.
x = event.offsetX;
y = event.offsetY;
};
window.onmousemove = function() {
if (isDown) {
box1.style.left = event.clientX - x + 'px';
box1.style.top = event.clientY - y + 'px';
}
};๋ง์ฐ์ค๋ฅผ ํด๋ฆญํ์ ๋, ์์ ๋ด์ ์์น๋ฅผ ์ ์ฅํด๋์๋ค๊ฐ ๋ง์ฐ์ค๋ฅผ ์์ง์ผ ๋, ์์ ๋ด ์์นํ๋ ๊ฑฐ๋ฆฌ๋งํผ ๋นผ์ค๋ค.
์ด๋ฒคํธ
<script>
const box1 = document.getElementById('box1');
let isDown;
//ํด๋ฆญํ ์์ ๋ด์ ์์น
let x=0;
let y=0;
window.onmousedown = function() {
if (event.target.id == 'box1') {
isDown = true;
}
//์์์ ์ด๋ ๋ถ๋ถ์ ๋๋ ๋์ง
x = event.offsetX;
y = event.offsetY;
};
//์ด๋ฒคํธ๋ฅผ ์์ง์ด๋ ๋์์๊ฒ ๊ฑธ๋ฉด ๋ง์ฐ์ค ํฌ์ธํฐ๊ฐ ๋์ ๋ฐ์ผ๋ก ๋๊ฐ๋ฉด ์๋ํ์ง ์๋๋ค.
window.onmousemove = function() {
if (isDown) {
box1.style.left = event.clientX - x + 'px';
box1.style.top = event.clientY - y + 'px';
}
};
window.onmouseup = function() {
isDown = false;
};
</script>
๐ป๋ฒ์ 2. position : relative๐ป
์์์ ๋ค๋ฅธ ํ๊ทธ๊ฐ ์กด์ฌํ ๋ ์ ์ฒด position์ absolute๋ก ์ค์ ํ๋ฉด ์์น๊ฐ ๊ฒน์น๋ค.
position์ relative๋ก ๋ณ๊ฒฝํ๋ฉด ์์๋ค์ด ๊ฒน์น์ง์๊ณ ์๋ ์์น๋ฅผ ๊ฐ์ง๊ฒ ๋๋ค.
์ข) position : absolute ์ฐ) position : relative
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 150px;
height: 150px;
position: relative;
left: 0;
top: 0;
background-color: gold;
}
</style>
</head>
<body>
<h1>Drag&Drop</h1>
<div id="box1" class="box"></div>
<p>drag&drop์ ๊ตฌํํฉ๋๋ค.</p>
</body>
</html>
๋ฐ์ค ์ข์ธก ์๋จ์ ๊ฑฐ๋ฆฌ ๊ตฌํ๊ธฐ
ํ์ด์ง ์ข์ธก ์๋จ๊ณผ ๋ฐ์ค ์ข์ธก ์๋จ์ ๊ฑฐ๋ฆฌ๋ฅผ ๊ตฌํด์ผํ๋ค.
console.log(box1.getBoundingClientRect());box1.getBoundingClientRect()์ผ๋ก ๋ฌธ์๋ฅผ ์ข์ธก์๋จ์ผ๋ก ํ๋ box1์ ์์น๋ฅผ ํ์ธ ํ ์ ์๋ค.
nx = box1.getBoundingClientRect().x;
ny = box1.getBoundingClientRect().y;box1์ ์์น๋ฅผ ๊ตฌํ์ฌ ๋ณ์์ ์ ์ฅ ํด๋๋ค.
window.onmousemove = function() {
if (isDown) {
box1.style.left = event.clientX - x - nx + 'px';
box1.style.top = event.clientY - y - ny + 'px';
}
};box1์ด ์ด๋ํ ๋ box์ ์์น๋งํผ ๋นผ์ค๋ค.
์ด๋ฒคํธ
<script>
const box1 = document.getElementById('box1');
let isDown;
//ํด๋ฆญํ ์์ ๋ด์ ์์น
let x=0;
let y=0;
let nx=0;
let ny=0;
// box1์ ๋ฌธ์ ์ข์ธก ์๋จ์ผ๋ก๋ถํฐ ๊ฑฐ๋ฆฌ
nx = box1.getBoundingClientRect().x;
ny = box1.getBoundingClientRect().y;
window.onmousedown = function() {
//๋น ํ๋ฉด์์ ๋๋๊ทธ๋ฅผ ํ์ ๋, ์์๊ฐ ๋ฐ๋ผ์ค๋ ๊ฒ์ ๋ฐฉ์ง
if (event.target.id == 'box1') {
isDown = true;
}
//์์์ ์ด๋ ๋ถ๋ถ์ ๋๋ ๋์ง
x = event.offsetX;
y = event.offsetY;
};
//์ด๋ฒคํธ๋ฅผ ์์ง์ด๋ ๋์์๊ฒ ๊ฑธ๋ฉด ๋ง์ฐ์ค ํฌ์ธํฐ๊ฐ ๋์ ๋ฐ์ผ๋ก ๋๊ฐ๋ฉด ์๋ํ์ง ์๋๋ค.
window.onmousemove = function() {
if (isDown) {
box1.style.left = event.clientX - x - nx + 'px';
box1.style.top = event.clientY - y - ny + 'px';
}
};
window.onmouseup = function() {
isDown = false;
};
</script>
