포트폴리오에 drag 이벤트를 사용해서 넣으려했는데 다 만들고나니... 필요가 없어져서 ㅠㅠㅠ
블로그에만 남기기로 했다.. 하하
<결과화면>
왼쪽에 있는 검정원을 오른쪽으로 드래그하면 텍스트가 바뀌는 drag 이벤트를 사용했다 ㅎㅎ!
<코드>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.box {
float: left;
width: 30px;
height: 30px;
margin: 15px;
/* padding: 10px; */
border: 3px solid gray;
border-radius: 50%;
position: relative;
}
.box:nth-child(2) {
margin-left: 200px;
}
.box:nth-child(2):before {
content: '';
width: 217px;
height: 5px;
display: block;
position: absolute;
top: 40%;
left: -730%;
background: gray;
}
#hz {
padding : 10px;
position: absolute;
top: -38%;
left: 15%;
cursor:pointer;
background: #000;
border-radius: 50%;
}
#demo {
/* clear:both; */
font-size: 0.875rem;
position: absolute;
left: 3.4%;
top: 5%;
text-align: center;
/* background: gold; */
width: 200px;
}
</style>
</head>
<body>
<div class="drag">
<div class="box" ondrop="drop(event)" ondragover="dragOver(event)">
<p ondragstart="dragStart(event)" ondrag="onDrag(event)" draggable="true" id="hz"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="dragOver(event)"></div>
<p id="demo">Drag로 항해를 도와주세요!</p>
</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function onDrag(event) {
document.getElementById("demo").innerHTML = "항해하는 중...";
}
function dragOver(event) {
event.preventDefault(); // 드롭 허용
}
function drop(event) {
event.preventDefault(); // 링크열기 차단
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "종점 도착!";
}
</script>
</body>
</html>'웹 > JAVA SCRIPT' 카테고리의 다른 글
| [코딩 공부_105] Symbol (0) | 2021.07.14 |
|---|---|
| [코딩 공부_104] js, 이벤트 종류! (0) | 2021.07.11 |
| [코딩 공부_91] accordian 실습하기(pure js) (0) | 2021.06.08 |
| [코딩 공부_90] DOM (0) | 2021.06.07 |
| [코딩 공부_89] for in 반복문, 배열(Array) (0) | 2021.06.04 |
댓글