jQuery Drag Drop – Resize to Fit Target

This is an example of how to make a draggable object resize to fit the droppable target element.

jQuery(".target").droppable();

// (height and width match)	
function dropCallback(event, ui) { 
	var $this = jQuery(this);
	$this.append(ui.draggable);    

	var width = $this.width();
	var height = $this.height();

	ui.draggable.css({
		height: height,
		width: width,
		top: 0,
		left: 0 
	});
}

View demo

Leave a Reply