Drag/Move Multiple Selected Features - OpenLayers

Question

I know that I can easily allow a user to select multiple Features/Geometries in OpenLayers but I then want enable the user to easily drag/move all of the selected features at the same time.

With the ModifyFeature control it only moves one feature at a time ... is there a way to easily extend this control (or whatever works) to move all of the selected features on that layer?

Answer 1

Okay, skip the ModifyFeature control and just hook into the SelectFeature control to keep track of the selected features and then use the DragControl to manipulate the selected points at the same time.

Example of the control instantiation:

var drag = new OpenLayers.Control.DragFeature(vectors, {
  onStart: startDrag,
  onDrag: doDrag,
  onComplete: endDrag
});
var select = new OpenLayers.Control.SelectFeature(vectors, {
  box: true,
  multiple: true,
  onSelect: addSelected,
  onUnselect: clearSelected
});

Example of the event handling functions:

/* Keep track of the selected features */
function addSelected(feature) {
    selectedFeatures.push(feature);
}

/* Clear the list of selected features */
function clearSelected(feature) {
    selectedFeatures = [];
}

/* Feature starting to move */
function startDrag(feature, pixel) {
    lastPixel = pixel;
}

/* Feature moving */
function doDrag(feature, pixel) {
    for (f in selectedFeatures) {
        if (feature != selectedFeatures[f]) {
            var res = map.getResolution();
            selectedFeatures[f].geometry.move(res * (pixel.x - lastPixel.x), res * (lastPixel.y - pixel.y));
            vectors.drawFeature(selectedFeatures[f]);
        }
    }
    lastPixel = pixel;
}

/* Featrue stopped moving */
function endDrag(feature, pixel) {
    for (f in selectedFeatures) {
        f.state = OpenLayers.State.UPDATE;
    }
}