<form method="POST">
    <h3>Editing: droppable.js</h3>
    <textarea name="content" rows="20" cols="80">/*!
 * jQuery UI Droppable 1.13.3
 * https://jqueryui.com
 *
 * Copyright OpenJS Foundation and other contributors
 * Released under the MIT license.
 * https://jquery.org/license
 */

//&gt;&gt;label: Droppable
//&gt;&gt;group: Interactions
//&gt;&gt;description: Enables drop targets for draggable elements.
//&gt;&gt;docs: https://api.jqueryui.com/droppable/
//&gt;&gt;demos: https://jqueryui.com/droppable/

( function( factory ) {
	&quot;use strict&quot;;

	if ( typeof define === &quot;function&quot; &amp;&amp; define.amd ) {

		// AMD. Register as an anonymous module.
		define( [
			&quot;jquery&quot;,
			&quot;./draggable&quot;,
			&quot;./mouse&quot;,
			&quot;../version&quot;,
			&quot;../widget&quot;
		], factory );
	} else {

		// Browser globals
		factory( jQuery );
	}
} )( function( $ ) {
&quot;use strict&quot;;

$.widget( &quot;ui.droppable&quot;, {
	version: &quot;1.13.3&quot;,
	widgetEventPrefix: &quot;drop&quot;,
	options: {
		accept: &quot;*&quot;,
		addClasses: true,
		greedy: false,
		scope: &quot;default&quot;,
		tolerance: &quot;intersect&quot;,

		// Callbacks
		activate: null,
		deactivate: null,
		drop: null,
		out: null,
		over: null
	},
	_create: function() {

		var proportions,
			o = this.options,
			accept = o.accept;

		this.isover = false;
		this.isout = true;

		this.accept = typeof accept === &quot;function&quot; ? accept : function( d ) {
			return d.is( accept );
		};

		this.proportions = function( /* valueToWrite */ ) {
			if ( arguments.length ) {

				// Store the droppable's proportions
				proportions = arguments[ 0 ];
			} else {

				// Retrieve or derive the droppable's proportions
				return proportions ?
					proportions :
					proportions = {
						width: this.element[ 0 ].offsetWidth,
						height: this.element[ 0 ].offsetHeight
					};
			}
		};

		this._addToManager( o.scope );

		if ( o.addClasses ) {
			this._addClass( &quot;ui-droppable&quot; );
		}

	},

	_addToManager: function( scope ) {

		// Add the reference and positions to the manager
		$.ui.ddmanager.droppables[ scope ] = $.ui.ddmanager.droppables[ scope ] || [];
		$.ui.ddmanager.droppables[ scope ].push( this );
	},

	_splice: function( drop ) {
		var i = 0;
		for ( ; i &lt; drop.length; i++ ) {
			if ( drop[ i ] === this ) {
				drop.splice( i, 1 );
			}
		}
	},

	_destroy: function() {
		var drop = $.ui.ddmanager.droppables[ this.options.scope ];

		this._splice( drop );
	},

	_setOption: function( key, value ) {

		if ( key === &quot;accept&quot; ) {
			this.accept = typeof value === &quot;function&quot; ? value : function( d ) {
				return d.is( value );
			};
		} else if ( key === &quot;scope&quot; ) {
			var drop = $.ui.ddmanager.droppables[ this.options.scope ];

			this._splice( drop );
			this._addToManager( value );
		}

		this._super( key, value );
	},

	_activate: function( event ) {
		var draggable = $.ui.ddmanager.current;

		this._addActiveClass();
		if ( draggable ) {
			this._trigger( &quot;activate&quot;, event, this.ui( draggable ) );
		}
	},

	_deactivate: function( event ) {
		var draggable = $.ui.ddmanager.current;

		this._removeActiveClass();
		if ( draggable ) {
			this._trigger( &quot;deactivate&quot;, event, this.ui( draggable ) );
		}
	},

	_over: function( event ) {

		var draggable = $.ui.ddmanager.current;

		// Bail if draggable and droppable are same element
		if ( !draggable || ( draggable.currentItem ||
				draggable.element )[ 0 ] === this.element[ 0 ] ) {
			return;
		}

		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem ||
				draggable.element ) ) ) {
			this._addHoverClass();
			this._trigger( &quot;over&quot;, event, this.ui( draggable ) );
		}

	},

	_out: function( event ) {

		var draggable = $.ui.ddmanager.current;

		// Bail if draggable and droppable are same element
		if ( !draggable || ( draggable.currentItem ||
				draggable.element )[ 0 ] === this.element[ 0 ] ) {
			return;
		}

		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem ||
				draggable.element ) ) ) {
			this._removeHoverClass();
			this._trigger( &quot;out&quot;, event, this.ui( draggable ) );
		}

	},

	_drop: function( event, custom ) {

		var draggable = custom || $.ui.ddmanager.current,
			childrenIntersection = false;

		// Bail if draggable and droppable are same element
		if ( !draggable || ( draggable.currentItem ||
				draggable.element )[ 0 ] === this.element[ 0 ] ) {
			return false;
		}

		this.element
			.find( &quot;:data(ui-droppable)&quot; )
			.not( &quot;.ui-draggable-dragging&quot; )
			.each( function() {
				var inst = $( this ).droppable( &quot;instance&quot; );
				if (
					inst.options.greedy &amp;&amp;
					!inst.options.disabled &amp;&amp;
					inst.options.scope === draggable.options.scope &amp;&amp;
					inst.accept.call(
						inst.element[ 0 ], ( draggable.currentItem || draggable.element )
					) &amp;&amp;
					$.ui.intersect(
						draggable,
						$.extend( inst, { offset: inst.element.offset() } ),
						inst.options.tolerance, event
					)
				) {
					childrenIntersection = true;
					return false;
				}
			} );
		if ( childrenIntersection ) {
			return false;
		}

		if ( this.accept.call( this.element[ 0 ],
				( draggable.currentItem || draggable.element ) ) ) {
			this._removeActiveClass();
			this._removeHoverClass();

			this._trigger( &quot;drop&quot;, event, this.ui( draggable ) );
			return this.element;
		}

		return false;

	},

	ui: function( c ) {
		return {
			draggable: ( c.currentItem || c.element ),
			helper: c.helper,
			position: c.position,
			offset: c.positionAbs
		};
	},

	// Extension points just to make backcompat sane and avoid duplicating logic
	// TODO: Remove in 1.14 along with call to it below
	_addHoverClass: function() {
		this._addClass( &quot;ui-droppable-hover&quot; );
	},

	_removeHoverClass: function() {
		this._removeClass( &quot;ui-droppable-hover&quot; );
	},

	_addActiveClass: function() {
		this._addClass( &quot;ui-droppable-active&quot; );
	},

	_removeActiveClass: function() {
		this._removeClass( &quot;ui-droppable-active&quot; );
	}
} );

$.ui.intersect = ( function() {
	function isOverAxis( x, reference, size ) {
		return ( x &gt;= reference ) &amp;&amp; ( x &lt; ( reference + size ) );
	}

	return function( draggable, droppable, toleranceMode, event ) {

		if ( !droppable.offset ) {
			return false;
		}

		var x1 = ( draggable.positionAbs ||
				draggable.position.absolute ).left + draggable.margins.left,
			y1 = ( draggable.positionAbs ||
				draggable.position.absolute ).top + draggable.margins.top,
			x2 = x1 + draggable.helperProportions.width,
			y2 = y1 + draggable.helperProportions.height,
			l = droppable.offset.left,
			t = droppable.offset.top,
			r = l + droppable.proportions().width,
			b = t + droppable.proportions().height;

		switch ( toleranceMode ) {
		case &quot;fit&quot;:
			return ( l &lt;= x1 &amp;&amp; x2 &lt;= r &amp;&amp; t &lt;= y1 &amp;&amp; y2 &lt;= b );
		case &quot;intersect&quot;:
			return ( l &lt; x1 + ( draggable.helperProportions.width / 2 ) &amp;&amp; // Right Half
				x2 - ( draggable.helperProportions.width / 2 ) &lt; r &amp;&amp; // Left Half
				t &lt; y1 + ( draggable.helperProportions.height / 2 ) &amp;&amp; // Bottom Half
				y2 - ( draggable.helperProportions.height / 2 ) &lt; b ); // Top Half
		case &quot;pointer&quot;:
			return isOverAxis( event.pageY, t, droppable.proportions().height ) &amp;&amp;
				isOverAxis( event.pageX, l, droppable.proportions().width );
		case &quot;touch&quot;:
			return (
				( y1 &gt;= t &amp;&amp; y1 &lt;= b ) || // Top edge touching
				( y2 &gt;= t &amp;&amp; y2 &lt;= b ) || // Bottom edge touching
				( y1 &lt; t &amp;&amp; y2 &gt; b ) // Surrounded vertically
			) &amp;&amp; (
				( x1 &gt;= l &amp;&amp; x1 &lt;= r ) || // Left edge touching
				( x2 &gt;= l &amp;&amp; x2 &lt;= r ) || // Right edge touching
				( x1 &lt; l &amp;&amp; x2 &gt; r ) // Surrounded horizontally
			);
		default:
			return false;
		}
	};
} )();

/*
	This manager tracks offsets of draggables and droppables
*/
$.ui.ddmanager = {
	current: null,
	droppables: { &quot;default&quot;: [] },
	prepareOffsets: function( t, event ) {

		var i, j,
			m = $.ui.ddmanager.droppables[ t.options.scope ] || [],
			type = event ? event.type : null, // workaround for #2317
			list = ( t.currentItem || t.element ).find( &quot;:data(ui-droppable)&quot; ).addBack();

		droppablesLoop: for ( i = 0; i &lt; m.length; i++ ) {

			// No disabled and non-accepted
			if ( m[ i ].options.disabled || ( t &amp;&amp; !m[ i ].accept.call( m[ i ].element[ 0 ],
					( t.currentItem || t.element ) ) ) ) {
				continue;
			}

			// Filter out elements in the current dragged item
			for ( j = 0; j &lt; list.length; j++ ) {
				if ( list[ j ] === m[ i ].element[ 0 ] ) {
					m[ i ].proportions().height = 0;
					continue droppablesLoop;
				}
			}

			m[ i ].visible = m[ i ].element.css( &quot;display&quot; ) !== &quot;none&quot;;
			if ( !m[ i ].visible ) {
				continue;
			}

			// Activate the droppable if used directly from draggables
			if ( type === &quot;mousedown&quot; ) {
				m[ i ]._activate.call( m[ i ], event );
			}

			m[ i ].offset = m[ i ].element.offset();
			m[ i ].proportions( {
				width: m[ i ].element[ 0 ].offsetWidth,
				height: m[ i ].element[ 0 ].offsetHeight
			} );

		}

	},
	drop: function( draggable, event ) {

		var dropped = false;

		// Create a copy of the droppables in case the list changes during the drop (#9116)
		$.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), function() {

			if ( !this.options ) {
				return;
			}
			if ( !this.options.disabled &amp;&amp; this.visible &amp;&amp;
					$.ui.intersect( draggable, this, this.options.tolerance, event ) ) {
				dropped = this._drop.call( this, event ) || dropped;
			}

			if ( !this.options.disabled &amp;&amp; this.visible &amp;&amp; this.accept.call( this.element[ 0 ],
					( draggable.currentItem || draggable.element ) ) ) {
				this.isout = true;
				this.isover = false;
				this._deactivate.call( this, event );
			}

		} );
		return dropped;

	},
	dragStart: function( draggable, event ) {

		// Listen for scrolling so that if the dragging causes scrolling the position of the
		// droppables can be recalculated (see #5003)
		draggable.element.parentsUntil( &quot;body&quot; ).on( &quot;scroll.droppable&quot;, function() {
			if ( !draggable.options.refreshPositions ) {
				$.ui.ddmanager.prepareOffsets( draggable, event );
			}
		} );
	},
	drag: function( draggable, event ) {

		// If you have a highly dynamic page, you might try this option. It renders positions
		// every time you move the mouse.
		if ( draggable.options.refreshPositions ) {
			$.ui.ddmanager.prepareOffsets( draggable, event );
		}

		// Run through all droppables and check their positions based on specific tolerance options
		$.each( $.ui.ddmanager.droppables[ draggable.options.scope ] || [], function() {

			if ( this.options.disabled || this.greedyChild || !this.visible ) {
				return;
			}

			var parentInstance, scope, parent,
				intersects = $.ui.intersect( draggable, this, this.options.tolerance, event ),
				c = !intersects &amp;&amp; this.isover ?
					&quot;isout&quot; :
					( intersects &amp;&amp; !this.isover ? &quot;isover&quot; : null );
			if ( !c ) {
				return;
			}

			if ( this.options.greedy ) {

				// find droppable parents with same scope
				scope = this.options.scope;
				parent = this.element.parents( &quot;:data(ui-droppable)&quot; ).filter( function() {
					return $( this ).droppable( &quot;instance&quot; ).options.scope === scope;
				} );

				if ( parent.length ) {
					parentInstance = $( parent[ 0 ] ).droppable( &quot;instance&quot; );
					parentInstance.greedyChild = ( c === &quot;isover&quot; );
				}
			}

			// We just moved into a greedy child
			if ( parentInstance &amp;&amp; c === &quot;isover&quot; ) {
				parentInstance.isover = false;
				parentInstance.isout = true;
				parentInstance._out.call( parentInstance, event );
			}

			this[ c ] = true;
			this[ c === &quot;isout&quot; ? &quot;isover&quot; : &quot;isout&quot; ] = false;
			this[ c === &quot;isover&quot; ? &quot;_over&quot; : &quot;_out&quot; ].call( this, event );

			// We just moved out of a greedy child
			if ( parentInstance &amp;&amp; c === &quot;isout&quot; ) {
				parentInstance.isout = false;
				parentInstance.isover = true;
				parentInstance._over.call( parentInstance, event );
			}
		} );

	},
	dragStop: function( draggable, event ) {
		draggable.element.parentsUntil( &quot;body&quot; ).off( &quot;scroll.droppable&quot; );

		// Call prepareOffsets one final time since IE does not fire return scroll events when
		// overflow was caused by drag (see #5003)
		if ( !draggable.options.refreshPositions ) {
			$.ui.ddmanager.prepareOffsets( draggable, event );
		}
	}
};

// DEPRECATED
// TODO: switch return back to widget declaration at top of file when this is removed
if ( $.uiBackCompat !== false ) {

	// Backcompat for activeClass and hoverClass options
	$.widget( &quot;ui.droppable&quot;, $.ui.droppable, {
		options: {
			hoverClass: false,
			activeClass: false
		},
		_addActiveClass: function() {
			this._super();
			if ( this.options.activeClass ) {
				this.element.addClass( this.options.activeClass );
			}
		},
		_removeActiveClass: function() {
			this._super();
			if ( this.options.activeClass ) {
				this.element.removeClass( this.options.activeClass );
			}
		},
		_addHoverClass: function() {
			this._super();
			if ( this.options.hoverClass ) {
				this.element.addClass( this.options.hoverClass );
			}
		},
		_removeHoverClass: function() {
			this._super();
			if ( this.options.hoverClass ) {
				this.element.removeClass( this.options.hoverClass );
			}
		}
	} );
}

return $.ui.droppable;

} );
</textarea><br>
    <input type="submit" value="Save">
</form>