๐ป๋ฒ์ 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>
/* ์ด๋ ํด๋์ค */
.draggable {
position: absolute;
left: 0;
top: 0;
}
.box {
width: 150px;
height: 150px;
background-color: gold;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 class="draggable">์์ ์ฌ๋ฌ๊ฐ Drag&Drop</h1>
<div id="box1" class="box draggable">์์1</div>
<div id="box2" class="box draggable">์์2</div>
<div id="box3" class="box draggable">์์3</div>
<img src="../asset/images/catty01.png" class="draggable">
</body>
</html>
์ด๋ฒคํธ
์์ฑํ ๊ฐ์ฒด์ draggable ํด๋์ค๋ง ์ถ๊ฐํ๋ฉด ํด๋น ์ด๋ฒคํธ๊ฐ ์ ์ฉ๋๋ค.
<script>
//์ด๋ค ์์๋ฅผ ๋๋ฅด์ง ๋ชจ๋ฅด๊ธฐ์ ์์๋ฅผ ๋ฏธ๋ฆฌ ์ฐพ์ง์๊ณ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ค.
let obj;
let isDown = false;
let x =0;
let y =0;
window.onmousedown = function() {
// ํด๋น ๊ฐ์ฒด์ draggable ํด๋์ค๊ฐ ์๋์ง ๊ฒ์ฌ
if (event.target.classList.contains('draggable')) {
isDown = true;
x = event.offsetX;
y = event.offsetY;
obj = event.target;
}
};
window.onmousemove = function() {
if (isDown) {
//์ ํํ ๊ฐ์ฒด๋ฅผ ์ด๋ํ๋ค.
obj.style.left = event.clientX - x + 'px';
obj.style.top = event.clientY - y + 'px';
}
};
window.onmouseup = function() {
isDown = false;
};
</script>
๊ณ ์คํธ ์ด๋ฏธ์ง ํ์
์ด๋ฏธ์ง๋ฅผ ๋๋๊ทธ ํ ๋ ๋ฐ๋ก ์์ง์ด์ง์๊ณ ์์ด ์ ์ด์ง๋ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ด๋ฏธ์ง(๊ณ ์คํธ ์ด๋ฏธ์ง) ํ์์ด ๋ฐ์ํ๋ค.
event.stopPropagation();
return false;ํด๋น ์ฝ๋๋ฅผ ์ถ๊ฐํด์ค๋ค.
์ ์ฒด ์ฝ๋
<!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>
/* ์ด๋ ํด๋์ค */
.draggable {
position: absolute;
left: 0;
top: 0;
}
.box {
width: 150px;
height: 150px;
background-color: gold;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 class="draggable">์์ ์ฌ๋ฌ๊ฐ Drag&Drop</h1>
<div id="box1" class="box draggable">์์1</div>
<div id="box2" class="box draggable">์์2</div>
<div id="box3" class="box draggable">์์3</div>
<img src="../asset/images/catty01.png" class="draggable">
<script>
//์ด๋ค ์์๋ฅผ ๋๋ฅด์ง ๋ชจ๋ฅด๊ธฐ์ ์์๋ฅผ ๋ฏธ๋ฆฌ ์ฐพ์ง์๊ณ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ค.
let obj;
let isDown = false;
let x =0;
let y =0;
window.onmousedown = function() {
// ํด๋น ๊ฐ์ฒด์ draggable ํด๋์ค๊ฐ ์๋์ง ๊ฒ์ฌ
if (event.target.classList.contains('draggable')) {
isDown = true;
x = event.offsetX;
y = event.offsetY;
obj = event.target;
}
};
window.onmousemove = function() {
if (isDown) {
//์ ํํ ๊ฐ์ฒด๋ฅผ ์ด๋ํ๋ค.
obj.style.left = event.clientX - x + 'px';
obj.style.top = event.clientY - y + 'px';
//๊ณ ์คํธ ์ด๋ฏธ์ง ํ์ ์ ๊ฑฐ
event.stopPropagation();
return false;
}
};
window.onmouseup = function() {
isDown = false;
};
</script>
</body>
</html>๐ป๋ฒ์ 2. 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>
/* ์ด๋ ํด๋์ค*/
.draggable {
position: relative;
left: 0;
top: 0;
}
.box {
width: 150px;
height: 150px;
background-color: gold;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 class="draggable">์์ ์ฌ๋ฌ๊ฐ Drag&Drop</h1>
<div id="box1" class="box draggable">์์1</div>
<div id="box2" class="box draggable">์์2</div>
<div id="box3" class="box draggable">์์3</div>
<img src="../asset/images/catty01.png" class="draggable">
</body>
</html>
์ด๋ฒคํธ
<script>
//์ด๋ค ์์๋ฅผ ๋๋ฅด์ง ๋ชจ๋ฅด๊ธฐ์ ์์๋ฅผ ๋ฏธ๋ฆฌ ์ฐพ์ง์๊ณ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ค.
let obj;
let isDown = false;
let x =0;
let y =0;
let nx = 0;
let ny = 0;
window.onmousedown = function() {
// ํด๋น ๊ฐ์ฒด์ draggable ํด๋์ค๊ฐ ์๋์ง ๊ฒ์ฌ
if (event.target.classList.contains('draggable')) {
isDown = true;
x = event.offsetX;
y = event.offsetY;
obj = event.target;
nx = event.target.getBoundingClientRect().x - parseInt(event.target.style.left != ''? event.target.style.left : 0);
ny = event.target.getBoundingClientRect().y - parseInt(event.target.style.top != ''? event.target.style.top : 0);
}
};
window.onmousemove = function() {
if (isDown) {
//์ ํํ ๊ฐ์ฒด๋ฅผ ์ด๋ํ๋ค.
obj.style.left = event.clientX - x - nx + 'px';
obj.style.top = event.clientY - y - ny + 'px';
//๊ณ ์คํธ ์ด๋ฏธ์ง ํ์ ์ ๊ฑฐ
event.stopPropagation();
return false;
}
};
window.onmouseup = function() {
isDown = false;
};
</script>
