I have been been working with this for a while now. Whenever you add 2 seperate draggable layers, openlayers will only activate the last one added. I wish it could be as simple as the code below. But that doesn't work

var dragFeatureend = new OpenLayers.Control.DragFeature([vectorLayer1, vectorLayer2], {autoActivate: true, onDrag: onCompleteMove});

I found a solution by making the layers selectable and calling events when each is clicked. But is there any work around other than making them selectable? Thanks!

  • Thx mate it's the only solution that did work for me !!
    – user24316
    Nov 24, 2013 at 17:05
  • Please don't add "thank you" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. Nov 24, 2013 at 19:22

4 Answers 4


After several days, I found a working solution.

  1. Create a layer (layerA) with some dragable features. Create a DragFeature control for this layer. Activate the control. Add the layerA to the map.

    NOTE: Do not create more than one control per layer, that screw-up everything at the last step for some reason.

  2. Create an other layer (layerB) with some dragable features. Create a DragFeature control for this layer as well. Activate the control. Add the layerB to the map.

    NOTE: At this point, only the last added layer, layerB, will have working Drag events.

  3. Create a SelectFeature control, even if you don't need one, for both layerA and layerB:

    new OpenLayers.Control.SelectFeature([layerA, layerB], {...});

  4. Activate the SelectFeature. This will "magically" enable the DragFeature control for both layerA and layerB.

    NOTE: The SelectFeature MUST be activated after the two DragFeature, otherwise it won't work.

I think this procedure is quite strait forward. But I can provide some example if needed.

It also works with more than 2 layers.

If the dragable layers are added dynamically, you must use the method setLayer() of the SelectFeature to set the new array of layers, after activating the drag feature control of the new layer. This will re-activate the SelectFeature layer and everything should continue to works as expected.

[edit] Layer.setOpacity(opacity) will stop working for all layers added to the SelectFeature. To set the opacity of those layers, you have to do something like this:

if (layer && layer.renderer && layer.renderer.root) {
        null, null, null, null, null, null, opacity);

Thanks Aragon, but your solution does not work. OpenLayers API specified that the control ModifyFeature have to be initialised with ONE layer, not an array. It gives an exception when an array is used (OpenLayers version 2.12).

Create a new modify feature control.

    layer   {OpenLayers.Layer.Vector} Layer that contains features that will be modified.
    options {Object} Optional object whose properties will be set on the control.

Same thing for the DragFeature:

Create a new control to drag features.

    layer   {OpenLayers.Layer.Vector} The layer containing features to be dragged.
    options {Object} Optional object whose properties will be set on the control.

The only Control that allows using multiple layers is the SelectFeature.

Create a new control for selecting features.

    layers  {OpenLayers.Layer.Vector}, or an array of vector layers.  The layer(s) this control will select features from.
    options {Object}

I think that there is no way to drag features from multiple layers using the current version of OpenLayers (2.12).

[Edit] There is a way, see my second answer.


i think ModifyFeature can solve your problem... OpenLayers.Control.ModifyFeature.DRAG is that constant used to make the control work in drag mode.

var dragFeature = new OpenLayers.Control.ModifyFeature([vector1, vector2], {
    mode: OpenLayers.Control.ModifyFeature.DRAG,
    virtualStyle: {
        fillColor: 'yellow',
        strokeColor: 'black'

i hope it helps you...


The answer (SelectFeature) by Gael is really helpful. It does work. Thank you, Gael.

I used OpenLayers 2.13 and just added two DragFeature controls to the map (one per layer). It did work in IE, after I realized that the feature id must be a string (when it was int, the features could not be dragged in IE neither). However even with the id set as string, in Chrome one of the layers still did not work - features could not be dragged. And it was not the order in which the DragFeature control was added to the layers. It was the order the layers were added to the map - the one on top was "draggable".

After adding and activating the SelectFeature control, features on both layers can be dragged in Chrome too. See here: http://jsfiddle.net/ctG2q/

In Chrome, when the selection control is commented out, the marker icon cannot be dragged (circle can). But then when the order the layers are added to the map is changed, it's the circle that cannot be dragged. With the selection control in place, both features can be dragged.

Again, thank you Gael. This trick saved the day :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.