PDA

View Full Version : Drag and Drop Proxy Element Positioning



acwar
27 Jun 2013, 1:45 AM
Hi.

I have an absolute layout panel in wich I'va added several form components.

When I start a Drag operation the dragged element moves away from the mouse like if its position was referenced from the 0,0 coordinate of the document, not from the panel


44574
If I try to drag the "New Expiration Date" component

44575
An extrange offset occurs






For making those components draggable, I've setted draggable property to true.


//Return's the component based on his type
component = this.buildComponent(fieldDescription,mainTabWindow.up('panel'));

component.id= "Element"+ fieldDescription.index;
component.disabled = true;
component.componentCls='draggable';
component.draggable = {
listeners:{
drag:function(dragger, e){
console.log("draggin");
debugger;
}
}
}
insertPanel.add(component);



Does anyone has any idea what's going on with the proxy? Am I setting the draggable components correctly? (I've tried with dragzones, but still no luck, I've got the same results)

slemmon
1 Jul 2013, 11:28 AM
I tried to reproduce the issue you're seeing using the absolute layout example on the absolute layout API doc in 4.2.1 an don't believe I see the issue you're seeing. Am I missing something in the setup of the test case?



Ext.create('Ext.form.Panel', {
title: 'Absolute Layout',
width: 300,
height: 275,
layout: {
type: 'absolute'
// layout-specific configs go here
//itemCls: 'x-abs-layout-item',
},
url:'save-form.php',
defaultType: 'textfield',
items: [{
x: 10,
y: 10,
xtype:'label',
text: 'Send To:'
},{
x: 80,
y: 10,
name: 'to',
anchor:'90%' // anchor width by percentage
},{
x: 10,
y: 40,
xtype:'label',
draggable: true,
text: 'Subject:'
},{
x: 80,
y: 40,
name: 'subject',
draggable: true,
anchor: '90%' // anchor width by percentage
},{
x:0,
y: 80,
xtype: 'textareafield',
name: 'msg',
anchor: '100% 100%' // anchor width and height
}],
renderTo: Ext.getBody()
});