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