Skip to main content

Search and Top Navigation

#4489 closed bug (duplicate)

Opened April 21, 2009 07:51PM UTC

Closed July 16, 2013 02:42PM UTC

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.

Attachments (0)
Change History (15)

Changed April 21, 2009 09:48PM UTC by gantww comment:1

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;

}

}

Changed April 29, 2009 02:16AM UTC by rdworth comment:2

component: ui.coreui.resizable
milestone: TBD1.8
priority: minorcritical

Changed July 23, 2009 02:09PM UTC by scottgonzalez comment:3

#4692 closed as duplicate.

Changed December 08, 2009 01:07AM UTC by solak comment:4

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.

Changed March 25, 2010 06:33PM UTC by IceReaper comment:5

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

Changed October 19, 2010 03:56PM UTC by scottgonzalez comment:6

priority: criticalmajor

Changed October 11, 2012 02:52PM UTC by scottgonzalez comment:7

milestone: 1.9.02.0.0

Changed November 04, 2012 01:00AM UTC by tj.vantoll comment:8

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?

Changed November 04, 2012 01:12AM UTC by mikesherov comment:9

_comment0: 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 "wontfix". 1351991956743782

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

Changed November 06, 2012 03:02AM UTC by tj.vantoll comment:10

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.

Changed June 20, 2013 02:49AM UTC by dmcatee comment:11

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.

Changed June 20, 2013 03:34PM UTC by tj.vantoll comment:12

Replying to [comment:11 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?

Changed July 07, 2013 11:55AM UTC by smurph comment:13

_comment0: I can confirm the behaviour reported by tj.vantoll 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. \ 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. 1373216918648051

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.

Changed July 08, 2013 12:24PM UTC by tj.vantoll comment:14

milestone: 2.0.0
resolution: worksforme
status: closedreopened
summary: Containment with resizable inside draggable is not workingResizable: Containment inside draggable is not working

Changed July 16, 2013 02:42PM UTC by tj.vantoll comment:15

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.