Make the marker draggable and interactive

Question

I have a vector layer for displaying markers as functions on my map, but now, as I can, I do this, they will be draggable or clickable. What can I do to get both?

/*** Init Drag Marker */ var dragFeature = new OpenLayers.Control.DragFeature(layerTrackMarker, {'onComplete': updateMarker} ); map.addControl(dragFeature); dragFeature.activate(); /*** Init Click Marker */ var clickFeature = new OpenLayers.Control.SelectFeature(layerTrackMarker, {} ); map.addControl(clickFeature); layerTrackMarker.events.on({ "featureselected": function(e) { var markerId = e.feature.geometry.id; removeMarker(markerId); /* ToDo: show context menu */ }, "featureunselected": function(e) { /* ToDo: hide context menu */ } }); clickFeature.activate(); 

Answer 1

I have not tested this, but would there be something like this work?

 var dragged = false; var dragFeature = new OpenLayers.Control.DragFeature(layerTrackMarker, { onComplete: function(){ if(dragged){ dragCallback(); }else{ clickCallback(); } }, onStart: function(){ dragged = false; }, onDrag: function(){ dragged = true; } }); map.addControl(dragFeature); dragFeature.activate(); 

Edit: onComplete does not fire if there was no actual drag and drop. Here is the working code

 var dragged = false; var dragFeature = new OpenLayers.Control.DragFeature(pointLayer, { onStart: function(){dragged = false;}, onDrag: function() {dragged = true;} }); map.addControl(dragFeature); dragFeature.activate(); map.events.register("mouseup", map , function(e){ if(dragged == true){ alert("dragged"); }else{ alert("clicked"); } }); 

jsFiddle: http://jsfiddle.net/reKRr/5/

EDIT: This is a less dangerous way to do it.

 var selectFeature = new OpenLayers.Control.SelectFeature( pointLayer, { onSelect: function(){ alert("selected"); } } ); var dragFeature = new OpenLayers.Control.DragFeature(pointLayer, { onComplete: function(){ alert("drag"); } }); dragFeature.handlers['drag'].stopDown = false; dragFeature.handlers['drag'].stopUp = false; dragFeature.handlers['drag'].stopClick = false; dragFeature.handlers['feature'].stopDown = false; dragFeature.handlers['feature'].stopUp = false; dragFeature.handlers['feature'].stopClick = false; map.addControls([selectFeature,dragFeature]); selectFeature.activate(); dragFeature.activate();