Add target property to drag&drop interaction

externs/olx.js

@@ -2372,7 +2372,8 @@ olx.interaction.DoubleClickZoomOptions.prototype.delta;
 
 /**
  * @typedef {{formatConstructors: (Array.<function(new: ol.format.Feature)>|undefined),
- *     projection: ol.proj.ProjectionLike}}
+ *     projection: ol.proj.ProjectionLike,
+ *     target: (Element|undefined)}}
  * @api
  */
 olx.interaction.DragAndDropOptions;
@@ -2394,6 +2395,14 @@ olx.interaction.DragAndDropOptions.prototype.formatConstructors;
 olx.interaction.DragAndDropOptions.prototype.projection;
 
 
+/**
+ * The element that is used as the drop target, default is the viewport element.
+ * @type {Element|undefined}
+ * @api
+ */
+olx.interaction.DragAndDropOptions.prototype.target;
+
+
 /**
  * @typedef {{className: (string|undefined),
  *     condition: (ol.events.ConditionType|undefined),

src/ol/interaction/draganddropinteraction.js

@@ -50,6 +50,12 @@ ol.interaction.DragAndDrop = function(opt_options) {
    */
   this.dropListenKeys_ = null;
 
+  /**
+   * @private
+   * @type {Element}
+   */
+  this.target = options.target ? options.target : null;
+
 };
 goog.inherits(ol.interaction.DragAndDrop, ol.interaction.Interaction);
 
@@ -141,7 +147,7 @@ ol.interaction.DragAndDrop.prototype.setMap = function(map) {
   }
   goog.base(this, 'setMap', map);
   if (map) {
-    var dropArea = map.getViewport();
+    var dropArea = this.target ? this.target : map.getViewport();
     this.dropListenKeys_ = [
       ol.events.listen(dropArea, ol.events.EventType.DROP,
           ol.interaction.DragAndDrop.handleDrop_, this),

test/spec/ol/interaction/draganddropinteraction.test.js

@@ -43,6 +43,22 @@ describe('ol.interaction.DragAndDrop', function() {
       expect(viewport.hasListener(ol.events.EventType.DRAGOVER)).to.be(false);
       expect(viewport.hasListener(ol.events.EventType.DROP)).to.be(false);
     });
+
+    it('registers and unregisters listeners on a custom target', function() {
+      var customTarget = new ol.events.EventTarget();
+      interaction = new ol.interaction.DragAndDrop({
+        formatConstructors: [ol.format.GeoJSON],
+        target: customTarget
+      });
+      interaction.setMap(map);
+      expect(customTarget.hasListener(ol.events.EventType.DRAGENTER)).to.be(true);
+      expect(customTarget.hasListener(ol.events.EventType.DRAGOVER)).to.be(true);
+      expect(customTarget.hasListener(ol.events.EventType.DROP)).to.be(true);
+      interaction.setMap(null);
+      expect(customTarget.hasListener(ol.events.EventType.DRAGENTER)).to.be(false);
+      expect(customTarget.hasListener(ol.events.EventType.DRAGOVER)).to.be(false);
+      expect(customTarget.hasListener(ol.events.EventType.DROP)).to.be(false);
+    });
   });
 
   describe('#handleDrop_', function() {