diff --git a/src/index.js b/src/index.js
index 6597769..d4a8e35 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,11 @@
-const doubleClickZoom = {
+const mapInteraction = {
   enable: ctx => {
     setTimeout(() => {
       // First check we've got a map and some context.
       if (
         !ctx.map ||
         !ctx.map.doubleClickZoom ||
+        !ctx.map.dragPan ||
         !ctx._ctx ||
         !ctx._ctx.store ||
         !ctx._ctx.store.getInitialConfigValue
@@ -13,13 +14,15 @@ const doubleClickZoom = {
       // Now check initial state wasn't false (we leave it disabled if so)
       if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom")) return;
       ctx.map.doubleClickZoom.enable();
+      ctx.map.dragPan.enable();
     }, 0);
   },
   disable(ctx) {
     setTimeout(() => {
-      if (!ctx.map || !ctx.map.doubleClickZoom) return;
+      if (!ctx.map || !ctx.map.doubleClickZoom || !ctx.map.dragPan) return;
       // Always disable here, as it's necessary in some cases.
       ctx.map.doubleClickZoom.disable();
+      ctx.map.dragPan.disable();
     }, 0);
   }
 };
@@ -37,7 +40,7 @@ const DrawRectangle = {
     });
     this.addFeature(rectangle);
     this.clearSelectedFeatures();
-    doubleClickZoom.disable(this);
+    mapInteraction.disable(this);
     this.updateUIClasses({ mouse: "add" });
     this.setActionableState({
       trash: true
@@ -70,32 +73,27 @@ const DrawRectangle = {
     const startPoint = [e.lngLat.lng, e.lngLat.lat];
     state.startPoint = startPoint;
   },
-  onMouseMove: function(state, e) {
+  onDrag: function(state, e) {
+    this.updateUIClasses({ mouse: 'add' });
+    // on first click, save clicked point coords as startpoint for rectangle
+    if (!state.startPoint) state.startPoint = [e.lngLat.lng, e.lngLat.lat];
+    if (state.startPoint) {
+      expandRectangle(state, e);
+    }
+    state.endPoint = [e.lngLat.lng, e.lngLat.lat];
+  },
+  onMouseUp: function(state, e) {
+    if (state.startPoint && state.endPoint) {
+      this.updateUIClasses({ mouse: "pointer" });
+      this.changeMode("simple_select", { featuresId: state.rectangle.id });
+    }
+  },
+  onMouseMove: function (state, e) {
     // if startPoint, update the feature coordinates, using the bounding box concept
     // we are simply using the startingPoint coordinates and the current Mouse Position
     // coordinates to calculate the bounding box on the fly, which will be our rectangle
     if (state.startPoint) {
-      state.rectangle.updateCoordinate(
-        "0.0",
-        state.startPoint[0],
-        state.startPoint[1]
-      ); //minX, minY - the starting point
-      state.rectangle.updateCoordinate(
-        "0.1",
-        e.lngLat.lng,
-        state.startPoint[1]
-      ); // maxX, minY
-      state.rectangle.updateCoordinate("0.2", e.lngLat.lng, e.lngLat.lat); // maxX, maxY
-      state.rectangle.updateCoordinate(
-        "0.3",
-        state.startPoint[0],
-        e.lngLat.lat
-      ); // minX,maxY
-      state.rectangle.updateCoordinate(
-        "0.4",
-        state.startPoint[0],
-        state.startPoint[1]
-      ); //minX,minY - ending point (equals to starting point)
+      expandRectangle(state, e);
     }
   },
   // Whenever a user clicks on a key while focused on the map, it will be sent here
@@ -103,7 +101,7 @@ const DrawRectangle = {
     if (e.keyCode === 27) return this.changeMode("simple_select");
   },
   onStop: function(state) {
-    doubleClickZoom.enable(this);
+    mapInteraction.enable(this);
     this.updateUIClasses({ mouse: "none" });
     this.activateUIButton();
 
@@ -137,3 +135,27 @@ const DrawRectangle = {
 };
 
 export default DrawRectangle;
+
+function expandRectangle(state, e) {
+  state.rectangle.updateCoordinate(
+    '0.0',
+    state.startPoint[0],
+    state.startPoint[1]
+  ); // minX, minY - the starting point
+  state.rectangle.updateCoordinate(
+    '0.1',
+    e.lngLat.lng,
+    state.startPoint[1]
+  ); // maxX, minY
+  state.rectangle.updateCoordinate('0.2', e.lngLat.lng, e.lngLat.lat); // maxX, maxY
+  state.rectangle.updateCoordinate(
+    '0.3',
+    state.startPoint[0],
+    e.lngLat.lat
+  ); // minX,maxY
+  state.rectangle.updateCoordinate(
+    '0.4',
+    state.startPoint[0],
+    state.startPoint[1]
+  );
+}