티스토리 뷰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="empty">
<div class="fill" draggable="true"></div>
</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<script src="js/main.js"></script>
</body>
</html>body{
background:darksalmon;
}
.fill{
background-image:url('../img/img_01.jpg');
position: relative;
height: 150px; width: 150px;
top: 5px; left: 5px;
cursor:pointer;
}
.empty{
display: inline-block;
height: 160px; width: 160px;
margin: 10px;
border:3px solid salmon;
background-color: #fff;
}
.hold{
border:solid #ccc 4px;
}
.hovered{
background: #f4f4f4;
border-style: dashed;
}
.invisible{
display: none;
}
const fill = document.querySelector('.fill');
const empties = document.querySelectorAll('.empty');
//fill listeners
fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);
//Loop through empties and call drag events
for(const empty of empties){
empty.addEventListener('dragover', dragOver);
empty.addEventListener('dragenter', dragEnter);
empty.addEventListener('dragleave', dragLeave);
empty.addEventListener('drop', dragDrop);
}
//drag function
function dragStart(){
this.className += ' hold';
setTimeout(() =>(this.className = 'invisible'), 0);
console.log('dragstart');
}
function dragEnd(){
this.className = 'fill';
console.log('dragend');
}
function dragOver(e){
e.preventDefault();
console.log('over');
}
function dragEnter(e){
e.preventDefault();
console.log('enter')
this.className += ' hovered';
}
function dragLeave(){
this.className = 'empty';
console.log('leave');
}
function dragDrop(){
this.className = 'empty';
this.append(fill);
}
위 강의를 보고그대로 만듬.. 물론 몰라서 콘솔로그는 계속 찍어봄
'Study > script.js' 카테고리의 다른 글
| [자바스크립트 객체지향]생성자함수(constructor) 만들기 (0) | 2019.11.12 |
|---|---|
| [자바스크립트 객체지향]오브젝트(Object)의 생성과 메소드(method) (0) | 2019.11.12 |
| [자바스크립트]3D..? 이미지 슬라이드 만들기 (0) | 2019.11.09 |
| [자바스크립트] 이미지 무한슬라이드 만들기... (0) | 2019.11.04 |
| [자바스크립트]음수값 양수로 변환 반대의 경우도.. (0) | 2019.11.04 |
댓글