Droppable, 드롭 기본사용, 드롭 비활성, 전달 방지

droppable

원문 링크 http://jqueryui.com/demos/droppable/

필요한 모듈 ( Dependencies )

• UI Core
• UI Widget
• UI Mouse
• UI Draggable

 

 

드롭 기본사용 source view

개요 : 드롭 기능의 기본 사용법입니다.

target에 드래그 드롭하세요!

Drop here

 

드롭 기능 활성/비활성source view

개요 : 드롭을 가능하게 하거나 불가능하게 옵션을 제어합니다.

드래그는 되지만 드롭은 안됨!!

타겟에 드래그 드롭 가능

accept: '#draggable3'

 

전달 방지 source view

개요 : greedy 옵션을 이용하여 타겟에 드롭 됬을 경우, 상위 요소로 드롭 효과가 전달되는 것을 방지하거나 허용

내부요소로 움직여 보세요.

Outer droppable

Inner droppable (부모요소로 전달됨)

Outer droppable

Inner droppable (부모요소로 전달되지 않음)