PDA

View Full Version : Drop item in the exact position



fabio.policeno
10 May 2013, 3:15 AM
Hello!


I'm trying to get the item from the west panel is dropped into the center panel in exactly the position of the cursor, and when the item is in the center panel, leaving him free to drag to the exact position of the cursor, but am not having success (he falls just right - in the shadow of the item):




Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
region: 'center',
cls: 'center',
listeners: {
render: function(cmp) {
cmp.dropZone = Ext.create('Ext.dd.DropZone', cmp.el, {
getTargetFromEvent: function(e) {
return e.getTarget('.center');
},

onNodeOver: function(node, src, e) {
return Ext.dd.DropZone.prototype.dropAllowed;
},

onNodeDrop: function(target, dragZone, e, data)
{
var item = data.item,
from = item.ownerCt,
to = cmp;

Ext.suspendLayouts();

from.remove(item, false);
to.insert(item);
item.setXY(e.xy);

Ext.resumeLayouts(true);
}
});
}
}
},{
region: 'west',
width: 50,
items: {
width: 50,
html: 'Item Drag',
cls: 'item-west',
itemSelector: 'div.item-west',
listeners: {
render: function(cmp) {
cmp.dragZone = Ext.create('Ext.dd.DragZone', cmp.el, {
getDragData: function(e) {
var sourceEl = e.getTarget(cmp.itemSelector),
ddEl;

if(sourceEl) {
ddEl = sourceEl.cloneNode(true);
ddEl.id = Ext.id();

return cmp.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: ddEl,
item: cmp
};
}
},

getRepairXY: function() {
return cmp.dragData.repairXY;
}
});
}
}
}
}]
});



Demo: http://screencast.com/t/CdtReUn6PuxI



Any suggestions?


Thank's!

fabio.policeno
10 May 2013, 6:27 AM
Solved!


Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
region: 'center',
cls: 'center',
listeners: {
render: function(cmp) {
cmp.dropZone = Ext.create('Ext.dd.DropZone', cmp.el, {
getTargetFromEvent: function(e) {
return e.getTarget('.center');
},

onNodeOver: function(node, src, e) {
return Ext.dd.DropZone.prototype.dropAllowed;
},

onNodeDrop: function(target, dragZone, e, data)
{
var item = data.item,
config;

if(!item) {
return;
}

config = Ext.clone(item.initialConfig);

Ext.suspendLayouts();

item.destroy();

item = Ext.apply(config, {
setDragZone: false,
draggable: true,
xy: e.xy
});

cmp.add(item);

Ext.resumeLayouts(true);
}
});
}
}
},{
region: 'west',
width: 50,
items: {
width: 50,
html: 'Item Drag',
cls: 'item-west',
itemSelector: 'div.item-west',
setDragZone: true,
listeners: {
render: function(cmp) {
if(!cmp.setDragZone) {
cmp.setXY(cmp.xy);
return;
}

cmp.dragZone = Ext.create('Ext.dd.DragZone', cmp.el, {
getDragData: function(e) {
var sourceEl = e.getTarget(cmp.itemSelector),
ddEl;

if(sourceEl) {
ddEl = sourceEl.cloneNode(true);
ddEl.id = Ext.id();

return cmp.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: ddEl,
item: cmp
};
}
},

getRepairXY: function() {
return cmp.dragData.repairXY;
}
});
}
}
}
}]
});