Opened 14 years ago
Closed 10 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 14 years ago by
comment:2 Changed 14 years ago by
Component: | ui.core → ui.resizable |
---|---|
Milestone: | TBD → 1.8 |
Priority: | minor → critical |
comment:4 Changed 13 years ago by
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 13 years ago by
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 13 years ago by
Priority: | critical → major |
---|
comment:7 Changed 11 years ago by
Milestone: | 1.9.0 → 2.0.0 |
---|
comment:8 Changed 11 years ago by
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 11 years ago by
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".
comment:10 Changed 11 years ago by
Resolution: | → worksforme |
---|---|
Status: | new → closed |
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 follow-up: 12 Changed 10 years ago by
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 Changed 10 years ago by
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 10 years ago by
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.
comment:14 Changed 10 years ago by
Milestone: | 2.0.0 |
---|---|
Resolution: | worksforme |
Status: | closed → reopened |
Summary: | Containment with resizable inside draggable is not working → Resizable: Containment inside draggable is not working |
comment:15 Changed 10 years ago by
Resolution: | → duplicate |
---|---|
Status: | reopened → closed |
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();
}