PDA

View Full Version : Start Drag operation programmatically



alexmipego
1 Oct 2012, 8:53 AM
Hi,

I'm attempting to start a drag & drop operation based on custom logic. My objective is to drag a google maps marker (custom map panel implementation) into a grid or other droptargets. I've already done some similar things on the map but always using a div set as a drag source, but now I'm at a loss.

Looking at the source I thought this should work:


var tmpEl = document.createElement('div');
tmpEl.id = Ext.id();
tmpEl.setAttribute('style', "zIndex:99999999; width: 20px; height: 20px; position:absolute; background-color: red;");
document.body.appendChild(tmpEl);

var dd = new Ext.dd.DragSource(tmpEl, {
ddGroup: "mapLocationsDD",
onStartDrag: function(x, y) {
console.log("ping on", arguments)
dd.proxy.ghost.update(Ext.String.format('{0}', 2));
}
});
dd.getDragData = function(e) {
console.log("ping")
return "";
};

dd.startDrag(500.0, 500.0);


The code runs and onStartDrag is called, but getDragData isn't called. Any ideas on how to "fake" the drag start?

alexmipego
2 Oct 2012, 2:59 AM
I found out that if I call


var evt = Ext.EventObject.setEvent(window.event);Ext.dd.DragDropManager.handleMouseDown(evt, dd);
Ext.dd.DragDropManager.startDrag(evt.getX(), evt.getY());


the tmp element does change to the drag icon but it doesn't follow the mouse. When hovering some drop targets I get some (expected) exceptions that indicate that the code is trying to check the validity of the drop though. I guess all that's missing is for ExtJs to follow the mouse...