[air] HTML-base air에서 drag drop event.

HTML-BASE air
(prototype / scriptaculous 사용)


air의 드래그&드롭은 아래와 같은 이벤트를 가진다.

드래그 대상 객체

Event

Description

dragstart

드래그가 시작될때 발생

drag

드래그중 마우스 위치가 이동할때마다 발생

dragend

드래그 끝날때 발생

드롭 대상 객체

Event

Description

dragenter

드래그 객체가 드롭 객체에 진입시 발생

dragover

드래그 객체가 드롭 객체 위에서 움직일때 발생

dragleave

드래그 객체가 드롭 객체를 벗어날 때 발생

drop

드롭시 발생

아래와 같은 두개의 객체가 있다고 해보자

<div id="draggable" style="-webkit-user-drag:element;">DRAGGABLE</div>
<br />
<div id="droppable">DROPPABLE</div>
<br />

위의 -webkit-user-drag:element;    을 적용함으로 이미 객체는 드래그가 되기 시작한다.

드래그&드롭 이벤트를 시작해보자

드래그 객체 이벤트 추가하기
1. dragstart
 – 드래그가 시작됨을 알리며, 드래그할 내용이 무엇인지 등을 결정한다.

$('draggable').addEventListener('dragstart', function(e) {
    air.trace("Drag Started");
    e.dataTransfer.effectAllowed = "copyMove";
    e.dataTransfer.setData("text/plain", "DragData");
});

effectAllowed 는 어떤 드롭 대상 객체에 갈 수 있는지를 결정한다.

[#M_effect 자세히 |접기|

String value

Description

“none”

No drag operations are allowed.

“copy”

The data will be copied to the destination,
leaving the original in place.

“link”

The data will be shared with the drop destination
using a link back to the original.

“move”

The data will be copied to the destination
and removed from the original location.

“copyLink”

The data can be copied or linked.

“copyMove”

The data can be copied or moved.

“linkMove”

The data can be linked or moved.

“all”

The data can be copied, moved, or linked. All is
the default effect when you prevent the default behavior.

_M#]
setData는 드래그 되는 데이터를 결정할 수 있다.
[#M_setData mime type|접기|

Data format

MIME type

Text

“text/plain”

HTML

“text/html”

URL

“text/uri-list”

Bitmap

“image/x-vnd.adobe.air.bitmap”

File list

“application/x-vnd.adobe.air.file-list”

위 5개의 타입별로 각각 다른 데이터를 동시에 저장해서 드래그 될 수 있다.
_M#]

drag / dragend 에서는 각각 필요한 작업을 수행한다.
보통 로직상 필요한 일만 수행하면 된다.

2. 드롭 대상 객체 이벤트 추가하기
 – dragenter
 – dragover
   enter / over 의 가장 중요한 역할은 드롭이 가능한지 여부를 알려주는 것

$('droppable').addEventListener('dragenter', function(e) {
    air.trace("Drag Enter");
    e.dataTransfer.dropEffect='copy'; // 이부분이 위의 effectAllowed 와 일치해야한다.
    e.preventDefault(); // 이벤트 진행을 막음으로 드롭이 가능한지를 결정
});
$('droppable').addEventListener('dragover', function(e) {
    air.trace("Drag Over");
    e.dataTransfer.dropEffect='copy'; // 이부분이 위의 effectAllowed 와 일치해야한다.
    e.preventDefault(); // 이벤트 진행을 막음으로 드롭이 가능한지를 결정
});

 – drop

$('droppable').addEventListener('drop', function(e) {
    air.trace("DROP :: " + e.dataTransfer.getData("text/plain");
});

 – dragleave
   주로 화면 상태 변경등의 로직만 수행하면 된다.

위와 같은 단계로 드래그&드롭을 구현

Comments

comments