PDA

View Full Version : draggable a big image



tonin10
10 Mar 2011, 9:26 AM
hello
i try to drag a big image 1375px *1375px in the viewport
i have curious things, it s place at the bottom left not on top left, i try a lot but without result.

first :
i can drag the image but not totaly, i can't see top of it


new Ext.Panel({
fullscreen :true,

layout: {
type:'vbox',

},
defaults: {
flex: 1
},
items : [
{
xtype:'component',
draggable : true,
html: '<img src="images/page-4.jpg" />' ,
style:{
position:'absolute'
},
}
]


})


and the next , i can see the top but draggable work bad :


new Ext.util.Draggable(new Ext.Panel({
fullscreen :true,
layout: {
type:'vbox'
},
defaults: {
flex: 1
},
items : [
{
xtype:'component',
html: '<img src="images/page-4.jpg" />'
}
]

})
, {});


do you have a idear, how simply drag a image biggest than the view?

thanks for your help

mmigdol
10 Mar 2011, 10:00 AM
I've been working on a similar problem, where the image is a zoomed in version of a smaller image. Instead of overriding Draggable, I'm just making the parent panel scrollable. This isn't working, however. I can drag the image, but the offsetBoundary (as printed below) is [0,0,0,0], so it always snaps back to the original position.

The measured size of the img tag (as shown in the logs) is 0 (when I run this on a device using Phonegap), so I suspect that has something to do with the problem. Would appreciate any pointers...



pinch = new Ext.Panel({
fullscreen: true,
hidden: true,
id: 'pinch-panel',
scroll: {
bounces: false,
momentum: false,
springTension: 0
},
html: '<img id="pinch-img" src="img.jpg">'
});
pinch.show();
var img = Ext.get('pinch-img');
var scale = 4.0;
img.setStyle('-webkit-transform', 'scale(' + scale + ')');
console.log('after show, img width is ' + img.getWidth() + ' height is ' + img.getHeight());
var region = pinch.scroller.offsetBoundary;
console.log('scroller region is ' + region.toString());

tonin10
11 Mar 2011, 7:06 AM
the pb of snaps can be clear with this change


scroll: {
bounces: false,
momentum: false,
springTension: 0
},
to
scroll:'both',




but the pb is that the image can not be scroll totally. we look only a part of the image

i search....

tonin10
11 Mar 2011, 7:29 AM
i found something :
put your scale =1
and

scroll: {
bounces: false,
momentum: true,
springTension: 1,
direction :'both'
}


but it's strange, we have a property draggable and we don't use it....

mmigdol
11 Mar 2011, 9:42 AM
The default for direction is "both", so I didn't include that.

I think using draggable probably complicates things. Using scrollable, the position of the panel in the viewport remains constant (top left at 0,0), and we're just moving the position of the viewport.

tonin10
11 Mar 2011, 9:49 AM
yes strange but for me without set direction:'both', it doesn't work
thanks for your help ;-)