How to drag features in Open Layers 3?

Question

In the OL3 examples I can drag objects and drop on the map, but I want to move/resize/rotate things that are already on the map like ol.geom.Point and other ol.geom objects. What is the OL3 way do do this?

Example in OL2:

OpenLayers.Control.DragFeature(layer)

Answer 1

Not sure why the example on OL3 website is so complicated. Dragging vector objects can be easily achieved using new ol.interaction.Modify.

Here is a simpler working example: jsFiddle

In short, if you marker was:

var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));

You can define modify interaction as :

var dragInteraction = new ol.interaction.Modify({
    features: new ol.Collection([pointFeature]),
    style: null
});

map.addInteraction(dragInteraction);

You can then get a event for getting the new location of marker after drag like so:

pointFeature.on('change',function(){
            console.log('Feature Moved To:' + this.getGeometry().getCoordinates());
},pointFeature);