|
18
|
1 |
/*! |
|
19
|
2 |
* jQuery UI Droppable 1.13.1 |
|
18
|
3 |
* http://jqueryui.com |
|
|
4 |
* |
|
|
5 |
* Copyright jQuery Foundation and other contributors |
|
|
6 |
* Released under the MIT license. |
|
|
7 |
* http://jquery.org/license |
|
|
8 |
*/ |
|
|
9 |
|
|
|
10 |
//>>label: Droppable |
|
|
11 |
//>>group: Interactions |
|
|
12 |
//>>description: Enables drop targets for draggable elements. |
|
|
13 |
//>>docs: http://api.jqueryui.com/droppable/ |
|
|
14 |
//>>demos: http://jqueryui.com/droppable/ |
|
|
15 |
|
|
|
16 |
( function( factory ) { |
|
19
|
17 |
"use strict"; |
|
|
18 |
|
|
18
|
19 |
if ( typeof define === "function" && define.amd ) { |
|
|
20 |
|
|
|
21 |
// AMD. Register as an anonymous module. |
|
|
22 |
define( [ |
|
|
23 |
"jquery", |
|
|
24 |
"./draggable", |
|
|
25 |
"./mouse", |
|
|
26 |
"./core" |
|
|
27 |
], factory ); |
|
|
28 |
} else { |
|
|
29 |
|
|
|
30 |
// Browser globals |
|
|
31 |
factory( jQuery ); |
|
|
32 |
} |
|
19
|
33 |
} )( function( $ ) { |
|
|
34 |
"use strict"; |
|
18
|
35 |
|
|
|
36 |
$.widget( "ui.droppable", { |
|
19
|
37 |
version: "1.13.1", |
|
18
|
38 |
widgetEventPrefix: "drop", |
|
|
39 |
options: { |
|
|
40 |
accept: "*", |
|
|
41 |
addClasses: true, |
|
|
42 |
greedy: false, |
|
|
43 |
scope: "default", |
|
|
44 |
tolerance: "intersect", |
|
|
45 |
|
|
|
46 |
// Callbacks |
|
|
47 |
activate: null, |
|
|
48 |
deactivate: null, |
|
|
49 |
drop: null, |
|
|
50 |
out: null, |
|
|
51 |
over: null |
|
|
52 |
}, |
|
|
53 |
_create: function() { |
|
|
54 |
|
|
|
55 |
var proportions, |
|
|
56 |
o = this.options, |
|
|
57 |
accept = o.accept; |
|
|
58 |
|
|
|
59 |
this.isover = false; |
|
|
60 |
this.isout = true; |
|
|
61 |
|
|
19
|
62 |
this.accept = typeof accept === "function" ? accept : function( d ) { |
|
18
|
63 |
return d.is( accept ); |
|
|
64 |
}; |
|
|
65 |
|
|
|
66 |
this.proportions = function( /* valueToWrite */ ) { |
|
|
67 |
if ( arguments.length ) { |
|
|
68 |
|
|
|
69 |
// Store the droppable's proportions |
|
|
70 |
proportions = arguments[ 0 ]; |
|
|
71 |
} else { |
|
|
72 |
|
|
|
73 |
// Retrieve or derive the droppable's proportions |
|
|
74 |
return proportions ? |
|
|
75 |
proportions : |
|
|
76 |
proportions = { |
|
|
77 |
width: this.element[ 0 ].offsetWidth, |
|
|
78 |
height: this.element[ 0 ].offsetHeight |
|
|
79 |
}; |
|
|
80 |
} |
|
|
81 |
}; |
|
|
82 |
|
|
|
83 |
this._addToManager( o.scope ); |
|
|
84 |
|
|
19
|
85 |
if ( o.addClasses ) { |
|
|
86 |
this._addClass( "ui-droppable" ); |
|
|
87 |
} |
|
18
|
88 |
|
|
|
89 |
}, |
|
|
90 |
|
|
|
91 |
_addToManager: function( scope ) { |
|
|
92 |
|
|
|
93 |
// Add the reference and positions to the manager |
|
|
94 |
$.ui.ddmanager.droppables[ scope ] = $.ui.ddmanager.droppables[ scope ] || []; |
|
|
95 |
$.ui.ddmanager.droppables[ scope ].push( this ); |
|
|
96 |
}, |
|
|
97 |
|
|
|
98 |
_splice: function( drop ) { |
|
|
99 |
var i = 0; |
|
|
100 |
for ( ; i < drop.length; i++ ) { |
|
|
101 |
if ( drop[ i ] === this ) { |
|
|
102 |
drop.splice( i, 1 ); |
|
|
103 |
} |
|
|
104 |
} |
|
|
105 |
}, |
|
|
106 |
|
|
|
107 |
_destroy: function() { |
|
|
108 |
var drop = $.ui.ddmanager.droppables[ this.options.scope ]; |
|
|
109 |
|
|
|
110 |
this._splice( drop ); |
|
|
111 |
}, |
|
|
112 |
|
|
|
113 |
_setOption: function( key, value ) { |
|
|
114 |
|
|
|
115 |
if ( key === "accept" ) { |
|
19
|
116 |
this.accept = typeof value === "function" ? value : function( d ) { |
|
18
|
117 |
return d.is( value ); |
|
|
118 |
}; |
|
|
119 |
} else if ( key === "scope" ) { |
|
|
120 |
var drop = $.ui.ddmanager.droppables[ this.options.scope ]; |
|
|
121 |
|
|
|
122 |
this._splice( drop ); |
|
|
123 |
this._addToManager( value ); |
|
|
124 |
} |
|
|
125 |
|
|
|
126 |
this._super( key, value ); |
|
|
127 |
}, |
|
|
128 |
|
|
|
129 |
_activate: function( event ) { |
|
|
130 |
var draggable = $.ui.ddmanager.current; |
|
|
131 |
|
|
|
132 |
this._addActiveClass(); |
|
|
133 |
if ( draggable ) { |
|
|
134 |
this._trigger( "activate", event, this.ui( draggable ) ); |
|
|
135 |
} |
|
|
136 |
}, |
|
|
137 |
|
|
|
138 |
_deactivate: function( event ) { |
|
|
139 |
var draggable = $.ui.ddmanager.current; |
|
|
140 |
|
|
|
141 |
this._removeActiveClass(); |
|
|
142 |
if ( draggable ) { |
|
|
143 |
this._trigger( "deactivate", event, this.ui( draggable ) ); |
|
|
144 |
} |
|
|
145 |
}, |
|
|
146 |
|
|
|
147 |
_over: function( event ) { |
|
|
148 |
|
|
|
149 |
var draggable = $.ui.ddmanager.current; |
|
|
150 |
|
|
|
151 |
// Bail if draggable and droppable are same element |
|
|
152 |
if ( !draggable || ( draggable.currentItem || |
|
19
|
153 |
draggable.element )[ 0 ] === this.element[ 0 ] ) { |
|
18
|
154 |
return; |
|
|
155 |
} |
|
|
156 |
|
|
|
157 |
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || |
|
19
|
158 |
draggable.element ) ) ) { |
|
18
|
159 |
this._addHoverClass(); |
|
|
160 |
this._trigger( "over", event, this.ui( draggable ) ); |
|
|
161 |
} |
|
|
162 |
|
|
|
163 |
}, |
|
|
164 |
|
|
|
165 |
_out: function( event ) { |
|
|
166 |
|
|
|
167 |
var draggable = $.ui.ddmanager.current; |
|
|
168 |
|
|
|
169 |
// Bail if draggable and droppable are same element |
|
|
170 |
if ( !draggable || ( draggable.currentItem || |
|
19
|
171 |
draggable.element )[ 0 ] === this.element[ 0 ] ) { |
|
18
|
172 |
return; |
|
|
173 |
} |
|
|
174 |
|
|
|
175 |
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || |
|
19
|
176 |
draggable.element ) ) ) { |
|
18
|
177 |
this._removeHoverClass(); |
|
|
178 |
this._trigger( "out", event, this.ui( draggable ) ); |
|
|
179 |
} |
|
|
180 |
|
|
|
181 |
}, |
|
|
182 |
|
|
|
183 |
_drop: function( event, custom ) { |
|
|
184 |
|
|
|
185 |
var draggable = custom || $.ui.ddmanager.current, |
|
|
186 |
childrenIntersection = false; |
|
|
187 |
|
|
|
188 |
// Bail if draggable and droppable are same element |
|
|
189 |
if ( !draggable || ( draggable.currentItem || |
|
19
|
190 |
draggable.element )[ 0 ] === this.element[ 0 ] ) { |
|
18
|
191 |
return false; |
|
|
192 |
} |
|
|
193 |
|
|
|
194 |
this.element |
|
|
195 |
.find( ":data(ui-droppable)" ) |
|
|
196 |
.not( ".ui-draggable-dragging" ) |
|
|
197 |
.each( function() { |
|
|
198 |
var inst = $( this ).droppable( "instance" ); |
|
|
199 |
if ( |
|
|
200 |
inst.options.greedy && |
|
|
201 |
!inst.options.disabled && |
|
|
202 |
inst.options.scope === draggable.options.scope && |
|
|
203 |
inst.accept.call( |
|
|
204 |
inst.element[ 0 ], ( draggable.currentItem || draggable.element ) |
|
|
205 |
) && |
|
19
|
206 |
$.ui.intersect( |
|
18
|
207 |
draggable, |
|
|
208 |
$.extend( inst, { offset: inst.element.offset() } ), |
|
|
209 |
inst.options.tolerance, event |
|
|
210 |
) |
|
|
211 |
) { |
|
|
212 |
childrenIntersection = true; |
|
19
|
213 |
return false; |
|
|
214 |
} |
|
18
|
215 |
} ); |
|
|
216 |
if ( childrenIntersection ) { |
|
|
217 |
return false; |
|
|
218 |
} |
|
|
219 |
|
|
|
220 |
if ( this.accept.call( this.element[ 0 ], |
|
19
|
221 |
( draggable.currentItem || draggable.element ) ) ) { |
|
18
|
222 |
this._removeActiveClass(); |
|
|
223 |
this._removeHoverClass(); |
|
|
224 |
|
|
|
225 |
this._trigger( "drop", event, this.ui( draggable ) ); |
|
|
226 |
return this.element; |
|
|
227 |
} |
|
|
228 |
|
|
|
229 |
return false; |
|
|
230 |
|
|
|
231 |
}, |
|
|
232 |
|
|
|
233 |
ui: function( c ) { |
|
|
234 |
return { |
|
|
235 |
draggable: ( c.currentItem || c.element ), |
|
|
236 |
helper: c.helper, |
|
|
237 |
position: c.position, |
|
|
238 |
offset: c.positionAbs |
|
|
239 |
}; |
|
|
240 |
}, |
|
|
241 |
|
|
|
242 |
// Extension points just to make backcompat sane and avoid duplicating logic |
|
19
|
243 |
// TODO: Remove in 1.14 along with call to it below |
|
18
|
244 |
_addHoverClass: function() { |
|
|
245 |
this._addClass( "ui-droppable-hover" ); |
|
|
246 |
}, |
|
|
247 |
|
|
|
248 |
_removeHoverClass: function() { |
|
|
249 |
this._removeClass( "ui-droppable-hover" ); |
|
|
250 |
}, |
|
|
251 |
|
|
|
252 |
_addActiveClass: function() { |
|
|
253 |
this._addClass( "ui-droppable-active" ); |
|
|
254 |
}, |
|
|
255 |
|
|
|
256 |
_removeActiveClass: function() { |
|
|
257 |
this._removeClass( "ui-droppable-active" ); |
|
|
258 |
} |
|
|
259 |
} ); |
|
|
260 |
|
|
19
|
261 |
$.ui.intersect = ( function() { |
|
18
|
262 |
function isOverAxis( x, reference, size ) { |
|
|
263 |
return ( x >= reference ) && ( x < ( reference + size ) ); |
|
|
264 |
} |
|
|
265 |
|
|
|
266 |
return function( draggable, droppable, toleranceMode, event ) { |
|
|
267 |
|
|
|
268 |
if ( !droppable.offset ) { |
|
|
269 |
return false; |
|
|
270 |
} |
|
|
271 |
|
|
|
272 |
var x1 = ( draggable.positionAbs || |
|
|
273 |
draggable.position.absolute ).left + draggable.margins.left, |
|
|
274 |
y1 = ( draggable.positionAbs || |
|
|
275 |
draggable.position.absolute ).top + draggable.margins.top, |
|
|
276 |
x2 = x1 + draggable.helperProportions.width, |
|
|
277 |
y2 = y1 + draggable.helperProportions.height, |
|
|
278 |
l = droppable.offset.left, |
|
|
279 |
t = droppable.offset.top, |
|
|
280 |
r = l + droppable.proportions().width, |
|
|
281 |
b = t + droppable.proportions().height; |
|
|
282 |
|
|
|
283 |
switch ( toleranceMode ) { |
|
19
|
284 |
case "fit": |
|
|
285 |
return ( l <= x1 && x2 <= r && t <= y1 && y2 <= b ); |
|
|
286 |
case "intersect": |
|
|
287 |
return ( l < x1 + ( draggable.helperProportions.width / 2 ) && // Right Half |
|
|
288 |
x2 - ( draggable.helperProportions.width / 2 ) < r && // Left Half |
|
|
289 |
t < y1 + ( draggable.helperProportions.height / 2 ) && // Bottom Half |
|
|
290 |
y2 - ( draggable.helperProportions.height / 2 ) < b ); // Top Half |
|
|
291 |
case "pointer": |
|
|
292 |
return isOverAxis( event.pageY, t, droppable.proportions().height ) && |
|
|
293 |
isOverAxis( event.pageX, l, droppable.proportions().width ); |
|
|
294 |
case "touch": |
|
|
295 |
return ( |
|
|
296 |
( y1 >= t && y1 <= b ) || // Top edge touching |
|
|
297 |
( y2 >= t && y2 <= b ) || // Bottom edge touching |
|
|
298 |
( y1 < t && y2 > b ) // Surrounded vertically |
|
|
299 |
) && ( |
|
|
300 |
( x1 >= l && x1 <= r ) || // Left edge touching |
|
|
301 |
( x2 >= l && x2 <= r ) || // Right edge touching |
|
|
302 |
( x1 < l && x2 > r ) // Surrounded horizontally |
|
|
303 |
); |
|
|
304 |
default: |
|
|
305 |
return false; |
|
18
|
306 |
} |
|
|
307 |
}; |
|
|
308 |
} )(); |
|
|
309 |
|
|
|
310 |
/* |
|
|
311 |
This manager tracks offsets of draggables and droppables |
|
|
312 |
*/ |
|
|
313 |
$.ui.ddmanager = { |
|
|
314 |
current: null, |
|
|
315 |
droppables: { "default": [] }, |
|
|
316 |
prepareOffsets: function( t, event ) { |
|
|
317 |
|
|
|
318 |
var i, j, |
|
|
319 |
m = $.ui.ddmanager.droppables[ t.options.scope ] || [], |
|
|
320 |
type = event ? event.type : null, // workaround for #2317 |
|
|
321 |
list = ( t.currentItem || t.element ).find( ":data(ui-droppable)" ).addBack(); |
|
|
322 |
|
|
|
323 |
droppablesLoop: for ( i = 0; i < m.length; i++ ) { |
|
|
324 |
|
|
|
325 |
// No disabled and non-accepted |
|
|
326 |
if ( m[ i ].options.disabled || ( t && !m[ i ].accept.call( m[ i ].element[ 0 ], |
|
19
|
327 |
( t.currentItem || t.element ) ) ) ) { |
|
18
|
328 |
continue; |
|
|
329 |
} |
|
|
330 |
|
|
|
331 |
// Filter out elements in the current dragged item |
|
|
332 |
for ( j = 0; j < list.length; j++ ) { |
|
|
333 |
if ( list[ j ] === m[ i ].element[ 0 ] ) { |
|
|
334 |
m[ i ].proportions().height = 0; |
|
|
335 |
continue droppablesLoop; |
|
|
336 |
} |
|
|
337 |
} |
|
|
338 |
|
|
|
339 |
m[ i ].visible = m[ i ].element.css( "display" ) !== "none"; |
|
|
340 |
if ( !m[ i ].visible ) { |
|
|
341 |
continue; |
|
|
342 |
} |
|
|
343 |
|
|
|
344 |
// Activate the droppable if used directly from draggables |
|
|
345 |
if ( type === "mousedown" ) { |
|
|
346 |
m[ i ]._activate.call( m[ i ], event ); |
|
|
347 |
} |
|
|
348 |
|
|
|
349 |
m[ i ].offset = m[ i ].element.offset(); |
|
|
350 |
m[ i ].proportions( { |
|
|
351 |
width: m[ i ].element[ 0 ].offsetWidth, |
|
|
352 |
height: m[ i ].element[ 0 ].offsetHeight |
|
|
353 |
} ); |
|
|
354 |
|
|
|
355 |
} |
|
|
356 |
|
|
|
357 |
}, |
|
|
358 |
drop: function( draggable, event ) { |
|
|
359 |
|
|
|
360 |
var dropped = false; |
|
|
361 |
|
|
|
362 |
// Create a copy of the droppables in case the list changes during the drop (#9116) |
|
|
363 |
$.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), function() { |
|
|
364 |
|
|
|
365 |
if ( !this.options ) { |
|
|
366 |
return; |
|
|
367 |
} |
|
|
368 |
if ( !this.options.disabled && this.visible && |
|
19
|
369 |
$.ui.intersect( draggable, this, this.options.tolerance, event ) ) { |
|
18
|
370 |
dropped = this._drop.call( this, event ) || dropped; |
|
|
371 |
} |
|
|
372 |
|
|
|
373 |
if ( !this.options.disabled && this.visible && this.accept.call( this.element[ 0 ], |
|
19
|
374 |
( draggable.currentItem || draggable.element ) ) ) { |
|
18
|
375 |
this.isout = true; |
|
|
376 |
this.isover = false; |
|
|
377 |
this._deactivate.call( this, event ); |
|
|
378 |
} |
|
|
379 |
|
|
|
380 |
} ); |
|
|
381 |
return dropped; |
|
|
382 |
|
|
|
383 |
}, |
|
|
384 |
dragStart: function( draggable, event ) { |
|
|
385 |
|
|
|
386 |
// Listen for scrolling so that if the dragging causes scrolling the position of the |
|
|
387 |
// droppables can be recalculated (see #5003) |
|
|
388 |
draggable.element.parentsUntil( "body" ).on( "scroll.droppable", function() { |
|
|
389 |
if ( !draggable.options.refreshPositions ) { |
|
|
390 |
$.ui.ddmanager.prepareOffsets( draggable, event ); |
|
|
391 |
} |
|
|
392 |
} ); |
|
|
393 |
}, |
|
|
394 |
drag: function( draggable, event ) { |
|
|
395 |
|
|
|
396 |
// If you have a highly dynamic page, you might try this option. It renders positions |
|
|
397 |
// every time you move the mouse. |
|
|
398 |
if ( draggable.options.refreshPositions ) { |
|
|
399 |
$.ui.ddmanager.prepareOffsets( draggable, event ); |
|
|
400 |
} |
|
|
401 |
|
|
|
402 |
// Run through all droppables and check their positions based on specific tolerance options |
|
|
403 |
$.each( $.ui.ddmanager.droppables[ draggable.options.scope ] || [], function() { |
|
|
404 |
|
|
|
405 |
if ( this.options.disabled || this.greedyChild || !this.visible ) { |
|
|
406 |
return; |
|
|
407 |
} |
|
|
408 |
|
|
|
409 |
var parentInstance, scope, parent, |
|
19
|
410 |
intersects = $.ui.intersect( draggable, this, this.options.tolerance, event ), |
|
18
|
411 |
c = !intersects && this.isover ? |
|
|
412 |
"isout" : |
|
|
413 |
( intersects && !this.isover ? "isover" : null ); |
|
|
414 |
if ( !c ) { |
|
|
415 |
return; |
|
|
416 |
} |
|
|
417 |
|
|
|
418 |
if ( this.options.greedy ) { |
|
|
419 |
|
|
|
420 |
// find droppable parents with same scope |
|
|
421 |
scope = this.options.scope; |
|
|
422 |
parent = this.element.parents( ":data(ui-droppable)" ).filter( function() { |
|
|
423 |
return $( this ).droppable( "instance" ).options.scope === scope; |
|
|
424 |
} ); |
|
|
425 |
|
|
|
426 |
if ( parent.length ) { |
|
|
427 |
parentInstance = $( parent[ 0 ] ).droppable( "instance" ); |
|
|
428 |
parentInstance.greedyChild = ( c === "isover" ); |
|
|
429 |
} |
|
|
430 |
} |
|
|
431 |
|
|
|
432 |
// We just moved into a greedy child |
|
|
433 |
if ( parentInstance && c === "isover" ) { |
|
|
434 |
parentInstance.isover = false; |
|
|
435 |
parentInstance.isout = true; |
|
|
436 |
parentInstance._out.call( parentInstance, event ); |
|
|
437 |
} |
|
|
438 |
|
|
|
439 |
this[ c ] = true; |
|
|
440 |
this[ c === "isout" ? "isover" : "isout" ] = false; |
|
|
441 |
this[ c === "isover" ? "_over" : "_out" ].call( this, event ); |
|
|
442 |
|
|
|
443 |
// We just moved out of a greedy child |
|
|
444 |
if ( parentInstance && c === "isout" ) { |
|
|
445 |
parentInstance.isout = false; |
|
|
446 |
parentInstance.isover = true; |
|
|
447 |
parentInstance._over.call( parentInstance, event ); |
|
|
448 |
} |
|
|
449 |
} ); |
|
|
450 |
|
|
|
451 |
}, |
|
|
452 |
dragStop: function( draggable, event ) { |
|
|
453 |
draggable.element.parentsUntil( "body" ).off( "scroll.droppable" ); |
|
|
454 |
|
|
|
455 |
// Call prepareOffsets one final time since IE does not fire return scroll events when |
|
|
456 |
// overflow was caused by drag (see #5003) |
|
|
457 |
if ( !draggable.options.refreshPositions ) { |
|
|
458 |
$.ui.ddmanager.prepareOffsets( draggable, event ); |
|
|
459 |
} |
|
|
460 |
} |
|
|
461 |
}; |
|
|
462 |
|
|
|
463 |
// DEPRECATED |
|
|
464 |
// TODO: switch return back to widget declaration at top of file when this is removed |
|
|
465 |
if ( $.uiBackCompat !== false ) { |
|
|
466 |
|
|
|
467 |
// Backcompat for activeClass and hoverClass options |
|
|
468 |
$.widget( "ui.droppable", $.ui.droppable, { |
|
|
469 |
options: { |
|
|
470 |
hoverClass: false, |
|
|
471 |
activeClass: false |
|
|
472 |
}, |
|
|
473 |
_addActiveClass: function() { |
|
|
474 |
this._super(); |
|
|
475 |
if ( this.options.activeClass ) { |
|
|
476 |
this.element.addClass( this.options.activeClass ); |
|
|
477 |
} |
|
|
478 |
}, |
|
|
479 |
_removeActiveClass: function() { |
|
|
480 |
this._super(); |
|
|
481 |
if ( this.options.activeClass ) { |
|
|
482 |
this.element.removeClass( this.options.activeClass ); |
|
|
483 |
} |
|
|
484 |
}, |
|
|
485 |
_addHoverClass: function() { |
|
|
486 |
this._super(); |
|
|
487 |
if ( this.options.hoverClass ) { |
|
|
488 |
this.element.addClass( this.options.hoverClass ); |
|
|
489 |
} |
|
|
490 |
}, |
|
|
491 |
_removeHoverClass: function() { |
|
|
492 |
this._super(); |
|
|
493 |
if ( this.options.hoverClass ) { |
|
|
494 |
this.element.removeClass( this.options.hoverClass ); |
|
|
495 |
} |
|
|
496 |
} |
|
|
497 |
} ); |
|
|
498 |
} |
|
|
499 |
|
|
|
500 |
return $.ui.droppable; |
|
|
501 |
|
|
19
|
502 |
} ); |