Containment with resizable inside draggable is not working

[gantww]

Hello all, I have the following code that adds an image to a div. While draggable containment seems to be working, resizable does not. $EditorDiv is the div I'm dropping the images into. The image is getting resizability and is draggable, but the containment simply isn't working. It's as if it is ignoring it completely.

$EditorDiv.append($tmpImg);

$("#" + ImageName).resizable( { aspectRatio: true, I've also tried using $EditorDiv, $("#EditorDiv"), $tmpImage.parent(), $tmpImage.parent().parent()

containment: "#EditorDiv", animate: 'slow', maxWidth: 300, maxHeight: 300, revert: "true" }) .parent().draggable({ containment: $("#EditorDiv"), revert: "true", cursor: "move" });

});

I've also tried to set the resizable containment using the .resizable('option' ...) method, with no success.

[gantww]

FYI, in case some other poor soul needs a workaround, here's how I did it:

Note $EditorDiv is the containing div stop: function(event, ui) { var pL = $(this).parent().offset().left; var pR = $EditorDiv.width() + pL; var pT = $(this).parent().offset().top; var pB = pT + $EditorDiv.height();

if (pL > ui.position.left

pR < ui.position.left + ui.size.width

pT > ui.position.top

pB < ui.position.top + ui.size.height) {

ui.size = ui.originalSize; ui.cancel = true;

}

}

[scott.gonzalez]

#4692 closed as duplicate.

[solak]

The simplest workaround is to set containment element posistion as relative or absolute. The problem is with the code calculating resizable element's offset, when it's not relative to parent's position.

Here's my simplified code:

<div id='container' style='position: relative; width: 300px; height: 300px;'>
   <div id='element'/>
</div>

and the javascript

var container = $('#container')
$('#element').draggable({containment: container}).resizable({containment: container})

Something like that should work properly.

[IceReaper]

Just had the same problem and it was extreme anoying... secondly i see that this bug is open for almoast a year (!) So i tried fixing it myself... Works so far for me: Search for this line:

if(isParent && isOffsetRelative) woset -= self.parentData.left;

and put before that line this block:

		if (isOffsetRelative) {
			var lookAtNode = this, hosetDiff = 0, wosetDiff = 0;
			var lw = this.outerWidth(), lh = this.outerHeight();
			while (lookAtNode.get(0) != self.containerElement.get(0)) {
				hosetDiff += lookAtNode.outerHeight()-lh;
				wosetDiff += lookAtNode.outerWidth()-lw;
				lw = lookAtNode.outerWidth(), lh = lookAtNode.outerHeight();
				if (/relative|absolute/.test(lookAtNode.css('position'))) {
					hosetDiff += parseInt(lookAtNode.css('top'));
					wosetDiff += parseInt(lookAtNode.css('left'));
				}
				lookAtNode = lookAtNode.parent();
			}
			if (hosetDiff != 0 || wosetDiff != 0) hoset = hosetDiff, woset = wosetDiff;
		}

What it does is to look staring with the actual element till the container if there is any element which is absolute or relative and add its offset. Secondly it checks if the outer-sizes have changed and added that offset too to avoid some other resize problems.

Sorry for my english, hope this will help some1...

[tj.vantoll]

I'm having trouble recreating this one with both the most recent version of jQuery UI and the the version this ticket was originally created with -  http://jsfiddle.net/tj_vantoll/TkHUE/.

Due to the activity on this issue I believe that this likely was an issue. Can someone watching this issue help provide a test case for this?

[mikesherov]

I did some work on .offset in core during the 1.8 release line. Try using 1.7.2 instead of 1.8.2 and see if the problem persists. If not, I'm inclined to say "worksforme".

[tj.vantoll]

I am unable to recreate this issue. If someone is able to create a test case showing this issue please comment and we can reinvestigate.