Resizable: Containment 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 González]

#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.

[dmcatee]

I reproduced this issue.

​http://jsfiddle.net/TkHUE/48/

Drag the draggable div before resizing it and you'll see you can drag it a little bit outside the parent container. Each time you click to drag you can drag it a little more outside the container.

[tj.vantoll]

Replying to dmcatee:

I reproduced this issue.

​http://jsfiddle.net/TkHUE/48/

Drag the draggable div before resizing it and you'll see you can drag it a little bit outside the parent container. Each time you click to drag you can drag it a little more outside the container.

I'm not seeing any issues with that test case. What browser are you using?

[smurph]

I can confirm the behaviour reported by dmcatee in his testcase using Firefox 22.0 and Chromium 28.0.1500.52 (Developer Build 28.0.1500.52-0ubuntu1.12.04.2) Ubuntu 12.04.

​http://jsfiddle.net/TkHUE/48/

Drag the box to edge of it's containment area to start with and then every time you click it you can drag it a few pixels at a time outside of it's container.

[tj.vantoll]

Duplicate of #7016.
This is a duplicate of #7016. I'm closing this one because this is really a draggable problem, not a resizable one.