목차
- drag 예제 - HTML 속성 이용 방식
- drag 정의
- drag 구문
- drag 예제 - JS 메서드 이용 방식
drag 예제 - HTML 속성 이용 방식
<style>
.box {
float: left;
width: 150px;
height:100px;
margin: 15px;
padding: 10px;
border: 1px solid gray;
}
#hz {padding:10px; border:1px solid red; cursor:pointer;}
#demo {clear:both;}
</style>
<div class="box" ondrop="drop(event)" ondragover="dragOver(event)">
<p ondragstart="dragStart(event)" ondrag="onDrag(event)" draggable="true" id="hz">홈짱닷컴 Homzzang.com</p>
</div>
<div class="box" ondrop="drop(event)" ondragover="dragOver(event)"></div>
<p id="demo">드래그해서 이동 가능.</p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function onDrag(event) {
document.getElementById("demo").innerHTML = "p 요소 드래그 중";
}
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 = "p 요소 드래그 완료";
}
</script>
결과보기
drag 정의
요소나 텍스트를 마우스로 드래그 (= 요소 선택 후 다른 곳으로 끌 때) 이벤트 발생.
1.
요소 드래그 가능하게 하려면, draggable 속성 이용.
단, 링크와 이미지는 기본적으로 드래그 가능하며 draggable 속성 불필요.
2-1. 드래그가능 대상 (= 끌어지는 요소) 관련 이벤트 :
2-2. 드롭타겟 (= 목적지요소) 관련 이벤트 :
3.
- 이벤트확산 : O
- 취소가능성 : O
- 이벤트타입 : DragEvent
- 지원 HTML : 모든 요소
- DOM 버전 : Level 3 Events
4.
IE9 이상 주요 최신 브라우저 모두 지원.
drag 구문
HTML 방식
- <element ondrag="homzzang()">
JS 방식
- object.ondrag = function(){homzzang()};
- object.addEventListener("drag", homzzang);
※ addEventLister() 방식 주의사항 2가지 : (이벤트명에 on 안 붙인. / 실행함수명 뒤에 소괄호 안 붙임)
※ addEventListener() 메서드는 IE9 이상 지원.
drag 예제 - JS 메서드 이용 방식
<style>
.box {
float: left;
width: 200px;
height: 60px;
padding: 0;
margin: 15px;
border: 1px solid silver;
}
.box p {padding: 10px; margin:0;}
.box p:hover {cursor:pointer;}
#demo {clear:both; padding:20px;}
</style>
<div class="box">
<p draggable="true" id="dragtarget">홈짱닷컴 Homzzang.com</p>
</div>
<div class="box"></div>
<p id="demo"></p>
<script>
document.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "드래그 시작";
event.target.style.opacity = "0.3";
});
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "드래그 완료";
event.target.style.opacity = "1";
});
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "box" ) {
event.target.style.border = "1px dashed red";
}
});
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "box" ) {
event.target.style.border = "";
}
});
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "box" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
결과보기
