diff --git a/src/message/modalComponent.js b/src/message/modalComponent.js
index fbf17fb3c201..4d4b4c754d11 100644
--- a/src/message/modalComponent.js
+++ b/src/message/modalComponent.js
@@ -36,6 +36,8 @@ const module = angular.module('ngeoModal', []);
  *
  * See our live example: [../examples/modal.html](../examples/modal.html)
  *
+ * @htmlAttribute {string} ngeo-draggable-handle The jquery selector that define the element
+ *     that can starts the dragging sequence. Defaults to ``.
  * @htmlAttribute {boolean} ngeo-modal-resizable Whether the modal can be
  *     resized or not. Defaults to `false`.
  * @htmlAttribute {boolean} ngeo-modal-closable Whether the modal can be
@@ -58,6 +60,7 @@ const messageModalComponent = {
   transclude: true,
   controller: 'ngeoModalController',
   bindings: {
+    'draggableHandle': '=?ngeodraggableHandle',
     'resizable': '<ngeoModalResizable',
     'closable': '<ngeoModalClosable'
   }
@@ -94,6 +97,11 @@ class Controller {
      */
     this.modal_;
 
+    /**
+     * @type {string}
+     */
+    this.draggableHandle;
+
     /**
      * @type {boolean}
      */
@@ -123,7 +131,9 @@ class Controller {
     this.resizable = !!this.resizable;
 
     const dialog = this.modal_.find('.modal-dialog');
-    dialog.draggable();
+    dialog.draggable({
+      handle: this.draggableHandle || '.modal-header'
+    });
     if (this.resizable) {
       dialog.resizable();
     }