Firejune

script.aculo.us에서 드래그 앤 드롭이 사용되는 목적은 크게 두가지입니다. 하나는 선택한 엘리먼트가 목적 엘리먼트로의 이동하는 것(Draggables & Droppables)이고 다른 하나는 선별되는 엘리먼트들의 목록(Sortable lists and floats)입니다. 둘 중에서 Draggables & Droppables에 대하여 알아봅시다.

Draggables & Droppables

옵션
# starteffect: function(element) {
element._opacity = Element.getOpacity(element);
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
} //드래그 시작에 일어나는 효과 설정
# reverteffect: function(element, top_offset, left_offset) {
var dur = Math.sqrt(Math.abs(top_offset2)+Math.abs(left_offset2))*0.02;
element._revert = new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur});
} //드래그 중에 일어나는 효과 설정
# endeffect: function(element) {
var toOpacity = typeof element._opacity == ‘number’ ? element._opacity : 1.0
new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity});
} //드래그 종료에 일어나는 효과 설정
# zindex: 1000 z축 값을 정한다.
# revert: false // true 마우스가 다운되면 되돌아 올지 말지를 결정
# snap: false // false, or xy or [x,y] or function(x,y){ return [x,y] } 정해진 값으로 드래그할 때 움직임에 스냅을 준다.

Droppables.add

옵션
accept : 드래그한 엘리먼트가 올바른지 class 명으로 확인한다.
containment : 확인된 드래그 엘리먼트를 봉쇄한다. 이 옵션은 Sortables 제어 또는 Drag-and-Drop, Sortables을 함께 쓰는 경우에 사용한다.
hoverclass: 드래그한 엘리먼트가 올바른 경우 목적지 엘리먼트의 모양을 CSS에서 지정한 class로 변경한다.
overlap: 만약, Sortables에서 수평(horizontal) 또는 수직(vertical)옵션을 가진 엘리먼트는 50% 오버랩 시킨다?
greedy : true(Default) 만약 true로 설정되어 있다면 hovering 처리를 멈춘다.

콜백옵션
onHover : Sortables에서 드래그하는 엘리먼트가 드래그되는 엘리먼트 위로 옮겨지고 영향을 받으면 언제든지 불러낸다. 돌려줄 수 있는 세가지 파라미터 : Draggable, 드래그하는 엘리먼트, 그리고 옵션규정에 따르는 오버랩 퍼센테이지.
onDrop : 드래그하는 엘리먼트가 드래그되는 엘리먼트에서 생성되고 그것이 받아들였다면, 언제든지 불러낸다. 돌려줄 수 있는 두가지 프리미터 : 드래그하는 엘리먼트, 그리고 드래그되는 엘리먼트.

Droppables.remove
이것에 대한 자료는 아직 없군요. Droppables.add에 선별된 엘리먼트를 드래그앤드롭을 사용하여 지워주는 기능을 엘리먼트에 부여합니다. 사용법은 Droppables.add와 흡사합니다.

예제는 "Drag and Drop AJAX Shopping Cart 실습"을 참조하세요.

※ 이 페이지는 RSS리더기에서 비정상으로 보일 수 있으며 정상적으로 작동하지 않습니다.