꾸준히 안타치기
Drag event 본문
반응형
드래그를 하려면,
드래그를 시작하는 함수 ,드래그를 집어 들었을때 함수 , 놓았을때의 함수가 필요하다.
<!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>Document</title>
<link rel="stylesheet" href="drag.css">
</head>
<body>
<ul class="list">
<li class="item" draggable="true">A</li>
<li class="item" draggable="true">P</li>
<li class="item" draggable="true">P</li>
<li class="item" draggable="true">L</li>
<li class="item" draggable="true">E</li>
</ul>
<script>
const list = document.querySelector(".list");
// dragstart, dragover, drop을 만들것
// 잡아들었을때를 변수에 넣는다.
let picked = null;
// 인덱스값
let pickedIndex = null;
list.addEventListener("dragstart",(e) =>{
const obj = e.target;
picked = obj
// 인덱스값을 구하는것 .. 브라우저에서 parentNode의 children을 가져오고
//indexOf에 넣어서 index값을 가져온다.
// (배열에 배열이 들어간 상태이므로, ...을 이용해 속의 내용물만 가져온다.)
pickedIndex = [...obj.parentNode.children].indexOf(obj)
})
list.addEventListener("dragover",(e)=>{
// drop함수와 겹쳐서 발생하지 않도록 해줌
e.preventDefault()
})
list.addEventListener("drop",(e)=>{
// console.log(e)
const obj = e.target;
const index = [...obj.parentNode.children].indexOf(obj)
// e.target.before(picked)
// 인덱스가 내가잡은 것보다 뒤에 있으면
// 그렇지 않으면 앞에 둔다.
if(index > pickedIndex){
obj.after(picked);
}else{
obj.before(picked);
}
// 삼항연산자로 표현 // 조건 ? 참 : 거짓
// index > pickedIndex ? obj.after(picked) : obj.before(picked);
})
</script>
</body>
</html>
css
.list{
margin:0;
padding:0;
}
li{
display: inline-block;
width:60px;
height:60px;
padding: 10px;
background-color: blue;
}
반응형
'Web > 인터렉티브웹' 카테고리의 다른 글
| Node.JS (0) | 2021.08.16 |
|---|---|
| 유용한 10가지 배열 함수들. Array APIs (0) | 2021.05.18 |
| 그림판 (0) | 2021.04.20 |
| flexbox (0) | 2021.03.27 |
| CSS 기초정리 / display (0) | 2021.03.27 |
'Web/인터렉티브웹' Related Articles
more
Comments