View Full Version : Start Drag operation programmatically

1 Oct 2012, 8:53 AM

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;");

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) {
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?

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...