View Full Version : Drag interrupted after onNodeOut (on IE)

5 Jan 2011, 8:32 AM

I made a custom drag & drop over an OpenLayer's map allowing me to manage drag & drop between the map, a GridPanel.

Features can be dragged and dropped in the GridPanel or int the map's markers.

I defined the methods onNodeEnter and onNodeOut to highlight the hovered feature of the map.

It woks fine under FireFox and Chrome but I have one small issue on IE : after the onNodeOut, the drag stops as if I had released the mouse button but I don't get why.

As there can be tricky operation between OpenLayers and Ext, I will turn my question this way :

How could I interrupt the drag inside the onNodeOut method in the drag process ?

One last think you may need to know id that OpenLayers handles features and their representation on map through SVG(FireFox) / VML(IE) I then get the hovered/dragged feature through OpenLayer's method and do not use common dom objects.

Thanks for any input :)

The code of the DropZone :

var MapDropZone = Ext.extend(Ext.dd.DropZone, {
lastHoveredFeat: null,
layer = null,
panel = null,

getTargetFromEvent: function(e) {
var feat = this.layer.getFeatureFromEvent(e);
if(feat) {
return Ext.get(feat.geometry.id);

onNodeEnter : function(target, dd, e, data){
var feat = this.layer.getFeatureFromEvent(e);
this.lastHoveredFeat = feat;

onNodeOut: function(target, dd, e, data){
if(this.lastHoveredFeat) {
this.lastHoveredFeat = null;

onNodeOver : function(target, dd, e, data){
var feature = this.layer.getFeatureFromEvent(e);
if(feature) {
return Ext.dd.DropZone.prototype.dropAllowed;
return Ext.dd.DropZone.prototype.dropNotAllowed;

onNodeDrop : function(target, dd, e, data) {
var tree = this.panel.taskTreeManager.getActiveTree();
if(tree) {
var feat = this.layer.getFeatureFromEvent(e);
var evt = {
target: feat.node,
data: data,
point: 'append'
evt.dropNode = data.node;
if(data.feature && data.feature.node) {
data.feature.node.parentNode.removeChild(data.feature.node, false);
return true;
return false;

6 Jan 2011, 5:52 AM
reply to myself but without a solution.

I noticed that the end or drag is called in the Ext.dd.DragDropMgr in the handleMouseMove method.

if (Ext.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
return this.handleMouseUp(e);
For an unknown reason, the value of e.button is -1 there.

If anyone has an idea, he is welcome :)