1. 정의
- on()와 드래그&드랍 리스너를 이용하여 구현
1) 드래그 & 드롭 이벤트
분류 | 이벤트 | 발생타이밍 |
드래그 | dragstart | 드래그를 시작 |
| drag | 드래그 중 |
| dragend | 드래그 종료 |
드롭 | dragenter | 드래그 요소가 드롭 영역에 들어감 |
| dragover | 드래그 요소가 드롭 영역에 있다 |
| dragleave | 드래그 요소가 드롭 영역 벗어남 |
| drop | 드롭 |
2. 예제
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{
width: 300px;
height:300px;
border: 1px solid black;
}
.drop {
width: 300px;
height:300px;
border: 1px solid black;
}
</style>
</head>
<div class="main">
<img src="small.png" id="drag" draggable="true"/>
</div>
<hr>
<div class="drop" id="drop"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script>
$(function(){
$('#drag').on({
//드래그 시작시 요소 id 저장
'dragstart':function(e){
e.originalEvent.dataTransfer.setData('text',e.target.id);
$(this).css('border','solid 2px Red');
},
//드래그 종료
'dragend':function(e){
$(this).css('border','none');
}
});
$('#drop').on({
'dragenter':function(e){
$(this).css('background-color','#fc0');
},
'dragleave':function(e){
$(this).css('background-color','#ffc');
},
//브라우저 표중 동작 취소
'dragover':function(e){
e.preventDefault();
},
'drop':function(e){
$(e.target).append($('#'+e.originalEvent.dataTransfer.getData('text')));
e.preventDefault();
}
});
});
</script>
1) draggable = true
- 드래그 하고자 하는 태그에 속성을 부여한다
a. 기본으로 true로 정해진 태그
- 선택된 텍스트
- href
- src
2) DataTransfer
- 드래그 정보 관리
- 정보 셋팅: setData(키,값)
- e.originalEvent.dataTransfer.setData('text',e.target.id);
- 정보 취득 : getData(키)
- +e.originalEvent.dataTransfer.getData('text')
- 키 값으로 텍스트, 혹은 url 지정
3) preventDefault
- 브라우저의 표중 동작이 우선처리되어 드롭 조작을 방해 할수 있다
- 기본 동작을 취할 수 있도록 설정
4) originalEvent 프로퍼티
- 드래그&드롭의 고유 이벤트 프로퍼티
- jQuery : e.originalEvent.dataTransfer
- javascript : e.dataTransfer