diff --git a/demos/droppable/accepted-elements.html b/demos/droppable/accepted-elements.html new file mode 100644 index 000000000..c8e809281 --- /dev/null +++ b/demos/droppable/accepted-elements.html @@ -0,0 +1,55 @@ + + + + jQuery UI Droppable - Accept Demo + + + + + + + + + + +
+ +
+

I'm draggable but can't be dropped

+
+ +
+

Drag me to my target

+
+ +
+

accept: '#draggable'

+
+ +
+ +
+ +

Specify using the accept option which element (or group of elements) is accepted by the target droppable.

+ +
+ + diff --git a/demos/droppable/propagation.html b/demos/droppable/propagation.html new file mode 100644 index 000000000..5911d2f1a --- /dev/null +++ b/demos/droppable/propagation.html @@ -0,0 +1,70 @@ + + + + jQuery UI Droppable - Prevent propagation + + + + + + + + + + +
+ +
+

Drag me to my target

+
+ +
+

Outer droppable

+
+

Inner droppable (not greedy)

+
+
+ +
+

Outer droppable

+
+

Inner droppable (greedy)

+
+
+ +
+ +
+ +

When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the greedy option set to true prevents event propagation when a draggable is dropped on a child node (droppable).

+ +
+ + diff --git a/demos/droppable/visual-feedback.html b/demos/droppable/visual-feedback.html new file mode 100644 index 000000000..1e3f233eb --- /dev/null +++ b/demos/droppable/visual-feedback.html @@ -0,0 +1,70 @@ + + + + jQuery UI Droppable - Visual feedback + + + + + + + + + + +
+ +

Feedback on hover only:

+ +
+

Drag me to my target

+
+ +
+

Drop here

+
+ +

Feedback on hover and when dropped:

+ +
+

Drag me to my target

+
+ +
+

Drop here

+
+ + + +
+ +
+ +

Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the hoverClass or activeClass options to specify respective classes.

+ +
+ +