PDA

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



Ghurdyl
5 Jan 2011, 8:32 AM
Hello,

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.panel.growFeatImg(feat);
this.lastHoveredFeat = feat;
},

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

onNodeOver : function(target, dd, e, data){
var feature = this.layer.getFeatureFromEvent(e);
if(feature) {
if(feature.node){
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'
};
if(data.node){
evt.dropNode = data.node;
}
tree.onNodeDrop(evt);
if(data.feature && data.feature.node) {
data.feature.node.parentNode.removeChild(data.feature.node, false);
evt.target.parentNode.appendChild(data.feature.node);
}
return true;
}
return false;
}
});

Ghurdyl
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)) {
this.stopEvent(e);
return this.handleMouseUp(e);
}
For an unknown reason, the value of e.button is -1 there.

If anyone has an idea, he is welcome :)