๐ปํด๋ฆญํ ์์น๋ก ์์ ์ด๋ํ๊ธฐ๐ป
์ข์ธก ์๋จ์ ๋ชฐ๋ ค ์๋ ์์๋ค์ด ํด๋ฆญํ ์์น๋ก ์์๋๋ก ์ด๋ํ๋ค.
ํด๋ฆญ ํ๋ฒ๋น ํ๋์ ์์๊ฐ ์ด๋ํ๋ฉฐ, ๋์ค์ ํด๋ฆญํ ์์๋ ๋งจ ์์ ์์ธ๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!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;
}
#box1 {background-color: tomato;}
#box2 {background-color: orange;}
#box3 {background-color: gold;}
#box4 {background-color: yellowgreen;}
#box5 {background-color: cornflowerblue;}
</style>
</head>
<body>
<!-- ์๋ฐ์ผ๋ก ์์ฑ -->
<!-- div#box$.box{์์$}*5 -->
<div id="box1" class="box">์์1</div>
<div id="box2" class="box">์์2</div>
<div id="box3" class="box">์์3</div>
<div id="box4" class="box">์์4</div>
<div id="box5" class="box">์์5</div>
</body>
</html>
๋ฌด๊ฒ์ค์ฌ ๋ง์ถฐ ์ด๋ํ๊ธฐ
list[index].style.left = event.clientX - 75 + 'px';
list[index].style.top = event.clientY - 75 + 'px';ํด๋ฆญ์ ์์๊ฐ ์ด๋ํ๋๋ฐ ๋ฌด๊ฒ์ค์ฌ์ ์์ ๊ฐ์ด๋ฐ ๋ง์ถ๊ธฐ ์ํด ์์ ํฌ๊ธฐ์ ๋ฐ์ ๋นผ์ค๋ค.
์ด๋ฒคํธ
<script>
const list = document.getElementsByClassName('box');
let index=0; //์์ ๋ฐฐ์ด ์์น
let zindex=1;
window.onmousedown = function() {
list[index].style.left = event.clientX - 75 + 'px';
list[index].style.top = event.clientY - 75 + 'px';
list[index].style.zIndex = zindex;
index++;
zindex++;
if (index >= list.length) index=0;
};
</script>์์์ position์ด absolute์ด๋ฏ๋ก ๋ฌธ์ ์ข์ธก ์๋จ์ ๊ธฐ์ค ์์ ์ด ๋ง์ถฐ์ ธ์๊ธฐ ๋๋ฌธ์ clientX, clientY ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์ ์ข์ธก ์๋จ ๊ธฐ์ค์ผ๋ก ์ขํ๋ฅผ ๋ฐํ๋ฐ์ ์์๋ฅผ ์ด๋์ํจ๋ค.
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ๋๋๊ทธ์ค๋๋กญ ์ด๋ฒคํธ : ์์ 1๊ฐ Drag & Drop (0) | 2023.10.12 |
|---|---|
| [JavaScript] ํด๋ฆญ ์ด๋ฒคํธ : ํด๋ฆญํ ์์น์ ์์ ์์ฑํ๊ธฐ (0) | 2023.10.12 |
| [JavaScript] ์๋ฐ์คํฌ๋ฆฝํธ๋ก css ์กฐ์ํ๊ธฐ (0) | 2023.10.12 |
| [JavaScript] ์ด๋ฒคํธ์ Hover Table(3) (0) | 2023.10.11 |
| [JavaScript] ์ด๋ฒคํธ์ Hover Table(2) (0) | 2023.10.11 |
