Opened 11 years ago

Closed 6 years ago

#4489 closed bug (duplicate)

Resizable: Containment inside draggable is not working

Reported by: gantww Owned by:
Priority: major Milestone:
Component: ui.resizable Version: 1.7.1
Keywords: resizables, draggables, containment Cc:
Blocked by: Blocking:

Description

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.

Change History (15)

comment:1 Changed 11 years ago by 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;

}

}

comment:2 Changed 11 years ago by rdworth

Component: ui.coreui.resizable
Milestone: TBD1.8
Priority: minorcritical

comment:3 Changed 10 years ago by Scott González

#4692 closed as duplicate.

comment:4 Changed 10 years ago by 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.

comment:5 Changed 10 years ago by 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...

comment:6 Changed 9 years ago by Scott González

Priority: criticalmajor

comment:7 Changed 7 years ago by Scott González

Milestone: 1.9.02.0.0

comment:8 Changed 7 years ago by 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?

comment:9 Changed 7 years ago by 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".

Last edited 7 years ago by mikesherov (previous) (diff)

comment:10 Changed 7 years ago by tj.vantoll

Resolution: worksforme
Status: newclosed

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.

comment:11 Changed 6 years ago by 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.

comment:12 in reply to:  11 Changed 6 years ago by 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?

comment:13 Changed 6 years ago by 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.

Last edited 6 years ago by smurph (previous) (diff)

comment:14 Changed 6 years ago by tj.vantoll

Milestone: 2.0.0
Resolution: worksforme
Status: closedreopened
Summary: Containment with resizable inside draggable is not workingResizable: Containment inside draggable is not working

comment:15 Changed 6 years ago by tj.vantoll

Resolution: duplicate
Status: reopenedclosed

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.

Note: See TracTickets for help on using tickets.