Resizable&draggable

[pbartels]

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]

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]

Can anyone verify this?

[tryanDLS]

I was able to duplicate this with 1.1b, have to dig further.

[obsidian]

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]

I am facing exactly the same problem. Any solution for this bug?

[jsakalos]

I have notified Jack on this bug.

[jack.slocum]

In order to drag and resize you must enable wrap:true. Otherwise you are dragging and resizing from the same element.

[whipmeister]

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/exam...zable/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.