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 
	});
}

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 Cancel reply