PDA

View Full Version : Resizable&draggable



pbartels
6 Jun 2007, 10:40 AM
I'm building a widget editor for ext and one of the functionalities is to drag and resize widgets real-time. However, when I add both drag and resize to a single layer the following problem arises in this case:
1.User drags layer
2.User resizes layer
3.user drags layer ----> now the drag-layer moves to a wrong location
when repeating steps 1-3 the layer will eventually move out of the screen boundaries

All of this tested in 1.1

Code:
Testlayer:
<div id="test" style="width:200px;height:200px;border:1px solid black;">bla</div>

JS:
var resizable = new Ext.Resizable('test', {
pinned: false,
minWidth:100,
minHeight:50,
animate:true,
easing: 'backIn',
handles: 'all',
disableTrackOver : false,
duration:.4,
draggable: true,
wrap:false,
dynamic:false
});

jnelson
11 Jun 2007, 10:56 AM
I'm building a widget editor for ext and one of the functionalities is to drag and resize widgets real-time. However, when I add both drag and resize to a single layer the following problem arises in this case:
1.User drags layer
2.User resizes layer
3.user drags layer ----> now the drag-layer moves to a wrong location
when repeating steps 1-3 the layer will eventually move out of the screen boundaries

All of this tested in 1.1

Code:
Testlayer:
<div id=&quot;test&quot; style=&quot;width:200px;height:200px;border:1px solid black;&quot;>bla</div>

JS:
var resizable = new Ext.Resizable('test', {
pinned: false,
minWidth:100,
minHeight:50,
animate:true,
easing: 'backIn',
handles: 'all',
disableTrackOver : false,
duration:.4,
draggable: true,
wrap:false,
dynamic:false
});

I was having the same issues, but then I took a look at Ext.BasicDialog, it does everything I was after.

pbartels
15 Jun 2007, 5:05 AM
Can anyone verify this?

tryanDLS
15 Jun 2007, 7:56 AM
I was able to duplicate this with 1.1b, have to dig further.

obsidian
14 Sep 2007, 10:25 AM
I, too, have a similar question; however, mine is having to do with being able to confine the resize and drag effects within the boundaries of another element on the page. I'm running against a wall on this one due to the numerous triggers that have to be checked at a given time. Any suggestions?

mcohnen
23 Sep 2007, 9:59 AM
I am facing exactly the same problem. Any solution for this bug?

jsakalos
23 Sep 2007, 2:47 PM
I have notified Jack on this bug.

jack.slocum
24 Sep 2007, 1:31 AM
In order to drag and resize you must enable wrap:true. Otherwise you are dragging and resizing from the same element.

whipmeister
2 Oct 2008, 8:06 AM
I realize this is an old post, but this may help someone searching for a solution, as it appears a few folks have encountered this.

I have confirmed that this behavior still exists in 2.2 and it does not seem related to the 'wrap: true' option.

I HAVE found that setting 'dynamic: true' seems to fix it, but I don't know why.

Here is a link to a page example demonstrating the two different behaviors:

http://www.lanimation.net/ext22/examples/resizable/bug.html

Here are the two instantiations. Note the only difference is the dynamic option.




var basic1 = new Ext.Resizable('basic1', {
minWidth:25,
minHeight:25,
wrap: true,
pinned:true,
handles: 'e w',
draggable: true,
resizeChild: true
});

var basic = new Ext.Resizable('basic', {
minWidth:25,
minHeight:25,
wrap: true,
pinned:true,
handles: 'e w',
draggable: true,
dynamic:true,
resizeChild: true
});



It feels to me that this is actually a bug that the dynamic option overrides in some way.

Anyway, hope this helps.