diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index a36c9a5b..06a90839 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -55,7 +55,7 @@
 <script>
 import Resizer from './Resizer.vue'
 import {
-  isInput,
+  isInputOrClickable,
   inRange,
   getTouchEvent,
   blurActiveElement,
@@ -190,7 +190,11 @@ export default {
       validator(value) {
         return value >= 0 && value <= 1
       }
-    }
+    },
+    undraggableElement: {
+      type: [Array],
+      default: () => []
+    },
   },
   components: {
     Resizer
@@ -770,7 +774,7 @@ export default {
         const handleDraggableMousedown = event => {
           let target = event.target
 
-          if (isInput(target)) {
+          if (isInputOrClickable(target, this.undraggableElement)) {
             return
           }
 
diff --git a/src/utils/index.js b/src/utils/index.js
index fbe636cd..0845bbf6 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,6 +1,6 @@
 export * from './numbers'
 
-const INPUT_NODE_NAMES = ['INPUT', 'TEXTAREA', 'SELECT']
+const INPUT_OR_CLICKABLE_NODE_NAMES = ['INPUT', 'TEXTAREA', 'SELECT', "BUTTON", "SPAN"]
 
 export const generateId = ((index = 0) => () => (index++).toString())()
 /**
@@ -59,8 +59,8 @@ export const stringStylesToObject = styles => {
   }, {})
 }
 
-export const isInput = element => {
-  return element && INPUT_NODE_NAMES.indexOf(element.nodeName) !== -1
+export const isInputOrClickable = (element, dynamicElement = []) => {
+  return element && (INPUT_OR_CLICKABLE_NODE_NAMES.indexOf(element.nodeName) !== -1 || dynamicElement.indexOf(element.nodeName) !== -1)
 }
 
 export const getTouchEvent = event => {