jquery - 드래그 & 드랍 구현 - on()[이벤트리스너]

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

드래그 & 드랍 구현 - on()[이벤트리스너]

단축키

Articles