/
droppable.xml
167 lines (167 loc) · 7.81 KB
/
droppable.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<?xml version="1.0"?>
<entry name="droppable" type="widget" widget-element="droppable element">
<title>Droppable Widget</title>
<desc>Create targets for draggable elements.</desc>
<longdesc>
<p>The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by <a href="/draggable/">draggables</a>). You can specify which draggables each will accept.</p>
</longdesc>
<added>1.0</added>
<options>
<option name="accept" default='"*"'>
<desc>Controls which draggable elements are accepted by the droppable.</desc>
<type name="Selector">
<desc>A selector indicating which draggable elements are accepted.</desc>
</type>
<type name="Function">
<desc>A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return <code>true</code> if the draggable should be accepted.</desc>
</type>
</option>
<option name="activeClass" type="String" default="false">
<desc>If specified, the class will be added to the droppable while an acceptable draggable is being dragged.</desc>
</option>
<option name="addClasses" type="Boolean" default="true">
<desc>If set to <code>false</code>, will prevent the <code>ui-droppable</code> class from being added. This may be desired as a performance optimization when calling <code>.droppable()</code> init on hundreds of elements.</desc>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="greedy" type="Boolean" default="false">
<desc>By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to <code>true</code>, any parent droppables will not receive the element.</desc>
</option>
<option name="hoverClass" type="String" default="false">
<desc>If specified, the class will be added to the droppable while an acceptable draggable is being hovered over the droppable.</desc>
</option>
<option name="scope" type="String" default='"default"'>
<desc>Used to group sets of draggable and droppable items, in addition to the <a href="#option-accept"><code>accept</code></a> option. A draggable with the same scope value as a droppable will be accepted.</desc>
</option>
<option name="tolerance" type="String" default='"intersect"'>
<desc>
Specifies which mode to use for testing whether a draggable is hovering over a droppable. Possible values:
<ul>
<li><code>"fit"</code>: Draggable overlaps the droppable entirely.</li>
<li><code>"intersect"</code>: Draggable overlaps the droppable at least 50% in both directions.</li>
<li><code>"pointer"</code>: Mouse pointer overlaps the droppable.</li>
<li><code>"touch"</code>: Draggable overlaps the droppable any amount.</li>
</ul>
</desc>
</option>
</options>
<events>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<event name="activate" type="dropactivate">
<desc>Triggered when an accepted draggable starts dragging. This can be useful if you want to make the droppable "light up" when it can be dropped on.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="draggable" type="jQuery">
<desc>A jQuery object representing the draggable element.</desc>
</property>
<property name="helper" type="jQuery">
<desc>A jQuery object representing the helper that is being dragged.</desc>
</property>
<property name="position" type="Object">
<desc>Current CSS position of the draggable helper as <code>{ top, left }</code> object.</desc>
</property>
<property name="offset" type="Object">
<desc>Current offset position of the draggable helper as <code>{ top, left }</code> object.</desc>
</property>
</argument>
</event>
<event name="deactivate" type="dropdeactivate">
<desc>Triggered when an accepted draggable stops dragging.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="draggable" type="jQuery">
<desc>A jQuery object representing the draggable element.</desc>
</property>
<property name="helper" type="jQuery">
<desc>A jQuery object representing the helper that is being dragged.</desc>
</property>
<property name="position" type="Object">
<desc>Current CSS position of the draggable helper as <code>{ top, left }</code> object.</desc>
</property>
<property name="offset" type="Object">
<desc>Current offset position of the draggable helper as <code>{ top, left }</code> object.</desc>
</property>
</argument>
</event>
<event name="over" type="dropover">
<desc>Triggered when an accepted draggable is dragged over the droppable (based on the<a href="#option-tolerance"><code>tolerance</code></a> option).</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="draggable" type="jQuery">
<desc>A jQuery object representing the draggable element.</desc>
</property>
<property name="helper" type="jQuery">
<desc>A jQuery object representing the helper that is being dragged.</desc>
</property>
<property name="position" type="Object">
<desc>Current CSS position of the draggable helper as <code>{ top, left }</code> object.</desc>
</property>
<property name="offset" type="Object">
<desc>Current offset position of the draggable helper as <code>{ top, left }</code> object.</desc>
</property>
</argument>
</event>
<event name="out" type="dropout">
<desc>Triggered when an accepted draggable is dragged out of the droppable (based on the<a href="#option-tolerance"><code>tolerance</code></a> option).</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<event name="drop" type="drop">
<desc>Triggered when an accepted draggable is dropped on the droppable (based on the<a href="#option-tolerance"><code>tolerance</code></a> option).</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="draggable" type="jQuery">
<desc>A jQuery object representing the draggable element.</desc>
</property>
<property name="helper" type="jQuery">
<desc>A jQuery object representing the helper that is being dragged.</desc>
</property>
<property name="position" type="Object">
<desc>Current CSS position of the draggable helper as <code>{ top, left }</code> object.</desc>
</property>
<property name="offset" type="Object">
<desc>Current offset position of the draggable helper as <code>{ top, left }</code> object.</desc>
</property>
</argument>
</event>
</events>
<methods>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</methods>
<example>
<desc>A pair of draggable and droppable elements.</desc>
<css><![CDATA[
#draggable {
width: 100px;
height: 100px;
background: #ccc;
}
#droppable {
position: absolute;
left: 250px;
top: 0;
width: 125px;
height: 125px;
background: #999;
color: #fff;
padding: 10px;
}
]]></css>
<code><![CDATA[
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function() {
alert( "dropped" );
}
});
]]></code>
<html><![CDATA[
<div id="droppable">Drop here</div>
<div id="draggable">Drag me</div>
]]></html>
</example>
<category slug="interactions"/>
</entry>