비슷한 내용을 자주 올리지만 다시 짤 때마다 원리를 이해한 상태에서 더 간결해지고 있으므로...
드래그나 리사이즈를 할 때마다 해당 모달의 z-index가 가장 상위로 올라온듯하게 보이도록 수정도 하였다.
HTML + CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{min-height:100vh; background:#333;}
.draggable{
position:fixed;
top:0;left:0;
border:2px solid #000;
background:#fff;
}
.dg-head{
position:relative;
width:100%;
padding:10px;
background:#000;
font-size:14px; font-weight:bold;color:#fff;
cursor:move;
user-select:none;
}
.dg-body{
position:relative; overflow:auto;
width:100%;
padding:10px 30px;
background:#fff;
}
.btn-resize{
position:absolute;
top:100%;left:100%;
transform:translate(-50%,-50%);
width:30px;aspect-ratio:1/1;
background:rgba(0,0,0,.1);
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(10px);
cursor:se-resize;
}
</style>
<script src="./main.js" type="module"></script>
</head>
<body>
<h1 style="color:#fff;">Draggable and Resize Modal</h1>
<div class="draggable">
<div class="dg-head">DragMe-1</div>
<div class="dg-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum non ipsam veniam.
</div>
</div>
<div class="draggable">
<div class="dg-head">DragMe-2</div>
<div class="dg-body">
Lorem ipsum dolor sit amet.
</div>
</div>
<div class="draggable">
<div class="dg-head">DragMe-3</div>
<div class="dg-body">
오버워치 하고 싶다...
</div>
</div>
</body>
</html>
|
cs |
main.js
|
1
2
3
4
5
6
7
8
9
|
import { Draggable } from "./Draggable.js";
import { Resize } from "./Resize.js";
const $$drag = document.getElementsByClassName('draggable');
for(let $drag of $$drag){
new Draggable($drag);
new Resize($drag);
}
|
cs |
Draggable
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
export class Draggable{
constructor($drag){
this.$drag = $drag;
this.$head = null;
this.POS = {x:null, y:null};
this.init();
}//constructor
init(){
this.$head = this.$drag?.getElementsByClassName('dg-head')[0];
if(!this.$head) return;
this.add_event_mouse_down();
}//init
add_event_mouse_down(){
this.$head.addEventListener('mousedown',this.on_mouse_down,{once:true});
}//add_event_mouse_down
on_mouse_down = e => {
document.body.appendChild(this.$drag);
const {clientX, clientY} = e;
const {left,top} = this.$drag.getBoundingClientRect();
this.POS.x = clientX - left;
this.POS.y = clientY - top;
window.addEventListener('mousemove',this.on_move);
window.addEventListener('mouseup', this.cancel,{once:true});
window.addEventListener('mouseleave', this.cancel,{once:true});
}//on_mouse_down
on_move = e =>{
const {clientX, clientY} = e;
const {x,y} = this.POS
const nowPosX = clientX - x;
const nowPosY = clientY - y;
this.$drag.style.transform = `translate(${nowPosX}px,${nowPosY}px)`;
}//on_move
cancel = ()=>{
window.removeEventListener('mousemove',this.on_move);
this.add_event_mouse_down();
}//cancel
}//Draggable
|
cs |
Resize
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
export class Resize{
constructor($drag){
this.$drag = $drag;
this.$btn = null;
this.POS = {x:null, y:null};
this.init();
}//constructor
init(){
this.$btn = this.add_btn();
this.$drag.appendChild(this.$btn);
this.add_mousedown();
}//init
add_btn(){
const $btnResize = document.createElement('BUTTON');
$btnResize.classList.add('btn-resize');
return $btnResize;
}//add_btn
add_mousedown(){
this.$btn.addEventListener('mousedown',this.on_down,{once:true});
}
on_down = e => {
document.body.appendChild(this.$drag);
const {clientX,clientY} = e;
const {left, top} = this.$drag.getBoundingClientRect();
this.POS.x = clientX - left;
this.POS.y = clientY - top;
window.addEventListener('mousemove',this.on_move);
window.addEventListener('mouseup',this.cancel,{once:true});
window.addEventListener('mouseleave',this.cancel,{once:true});
}//on_down
on_move = e =>{
const {clientX,clientY} = e;
const {x,y} = this.POS;
const {width,height, left, top} = this.$drag.getBoundingClientRect();
const perX = clientX - x - left;
const perY = clientY - y - top;
this.$drag.style.width = `${width + perX}px`;
this.$drag.style.height = `${height + perY}px`;
this.POS.x = width + perX;
this.POS.y = height + perY;
}//on_move
cancel = ()=>{
window.removeEventListener('mousemove',this.on_move);
this.add_mousedown();
}//cancel
}//Resize
|
cs |
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| [JS][Canvas] 캔버스로 파이그래프 그리기 (0) | 2023.04.29 |
|---|---|
| [JS]바닐라 자바스크립트로 slick slider 간단히 구현해보기 (0) | 2023.01.20 |
| 달력 만들기(3) + To Do List (0) | 2022.12.15 |
| [CSS,JS] 3d-carousel slider(캐러샐 슬라이더) (0) | 2022.10.24 |
| [CSS,JS] 타임 슬라이더 (0) | 2022.10.11 |