PDA

View Full Version : Problem with dragging an image within a window



silk
10 Apr 2012, 11:22 AM
You can paste the following code inside firebug console to test it, provided you have the Ext environment (e.g.: http://docs.sencha.com/ext-js/4-0/#)

Ext.create ('Ext.window.Window' , {
width: 500 ,
height: 300 ,
items: [abc= new Ext.Container({
// draggable:true,
style : 'position:absolute;',
html : '<img src="http://dev.sencha.com/deploy/ChartsDemo/examples/shared/thumbs/tiger.png" />',
items : []
})]
}).show();
new Ext.dd.DD(abc);


The goal is to be able to drag the image freely inside the open window, even allowing it to drag out of view;
All worked fine in 3.x, now that it is in 4.x, I am experiencing the following problem:
if use new Ext.dd.DD to make the component draggable, it does not go beyond [0,0] of the window, same code worked fine in 3.x(use pre-4 way to create window);
when tried to use draggable:true instead of new Ext.dd.DD, different problem appears: you can drag freely to anywhere within the browser, when your window is at top left corner, everything is fine, if you put the window somewhere to the right or bottom, the image is gone, because mouse down is telling the image to start at somewhere outside the view.
How to achieve the above goal (to drag freely inside a window)?

silk
12 Apr 2012, 11:10 AM
As of today: 04/12/12, the following code works as expected, someone from Sencha must have updated the core code.

Ext.create ('Ext.window.Window' , {
width: 500 ,
height: 300 ,
items: [new Ext.Container({
draggable:true,
style : 'position:absolute;',
html : '<img src="http://dev.sencha.com/deploy/ChartsDemo/examples/shared/thumbs/tiger.png" />',
items : []
})]
}).show();