feat(Modal): Add drag and drop function

Closes #165

doc/components/component/modal.vue

@@ -10,6 +10,8 @@
     <example demo="message/modal6"></example>
 
     <h3>Modal参数</h3>
+    <p><code>h-modal-header</code>: 将自带modal头部样式，拖拽会识别拥有该样式的dom来执行。</p>
+    <p><code>h-modal-footer</code>: 将自带modal底部样式</p>
     <example demo="message/modal12"></example>
 
     <h3>自定义操作按钮</h3>

doc/components/demos/message/modal12.vue

@@ -7,6 +7,9 @@
       <FormItem label="全屏">
         <h-switch small v-model="params.fullScreen" @change="revert('middle', 'height')">fullScreen</h-switch>
       </FormItem>
+      <FormItem label="关闭Icon">
+        <h-switch small v-model="params.hasCloseIcon">hasCloseIcon</h-switch>
+      </FormItem>
       <FormItem label="垂直居中">
         <h-switch small v-model="params.middle" @change="revert('fullScreen', 'height')">middle</h-switch>
       </FormItem>
@@ -16,6 +19,9 @@
       <FormItem label="有分割线">
         <h-switch small v-model="params.hasDivider">hasDivider</h-switch>
       </FormItem>
+      <FormItem label="可拖拽">
+        <h-switch small v-model="params.draggable" @change="revert('fullScreen','hasMask')">draggable，只支持js调用的方式，1.25.0+。</h-switch>
+      </FormItem>
       <FormItem label="测试超长弹框">
         <h-switch small v-model="height" @change="revert('fullScreen', 'middle', 'hasMask')"></h-switch>
       </FormItem>
@@ -44,7 +50,9 @@ const DEFAULT_VALUE = {
   fullScreen: false,
   middle: false,
   hasMask: true,
-  hasDivider: false
+  hasDivider: false,
+  hasCloseIcon: false,
+  draggable: false
 };
 export default {
   data() {

doc/components_en/component/modal.vue

@@ -10,6 +10,8 @@
     <exampleEn demo="message/modal6"></exampleEn>
 
     <h3>Modal params</h3>
+    <p><code>h-modal-header</code>: With modal header style, drag and drop identifies the DOM that owns the style to execute.</p>
+    <p><code>h-modal-footer</code>: With modal footer style.</p>
     <exampleEn demo="message/modal12"></exampleEn>
 
     <h3>Define buttons</h3>

doc/components_en/demos/message/modal12.vue

@@ -7,6 +7,9 @@
       <FormItem label="full screen">
         <h-switch small v-model="params.fullScreen" @change="revert('middle', 'height')">fullScreen</h-switch>
       </FormItem>
+      <FormItem label="close icon">
+        <h-switch small v-model="params.hasCloseIcon">hasCloseIcon</h-switch>
+      </FormItem>
       <FormItem label="middle popup">
         <h-switch small v-model="params.middle" @change="revert('fullScreen', 'height')">middle</h-switch>
       </FormItem>
@@ -16,6 +19,9 @@
       <FormItem label="has divider">
         <h-switch small v-model="params.hasDivider">hasDivider</h-switch>
       </FormItem>
+      <FormItem label="draggable">
+        <h-switch small v-model="params.draggable" @change="revert('fullScreen','hasMask')">draggable，only support JS calls，1.25.0+。</h-switch>
+      </FormItem>
       <FormItem label="test large popup">
         <h-switch small v-model="height" @change="revert('fullScreen', 'middle', 'hasMask')"></h-switch>
       </FormItem>
@@ -44,7 +50,8 @@ const DEFAULT_VALUE = {
   fullScreen: false,
   middle: false,
   hasMask: true,
-  hasDivider: false
+  hasDivider: false,
+  draggable: false
 };
 export default {
   data() {

src/plugins/draggable/index.js

@@ -1,5 +1,5 @@
 class Draggable {
-  constructor(element, options) {
+  constructor(element, options = {}) {
     this.isDragging = false;
     this.options = options;
     this.element = element;

src/plugins/notify/index.js

@@ -1,5 +1,6 @@
 import utils from 'heyui/src/utils/utils';
 import locale from 'heyui/src/locale';
+import Draggable from 'heyui/src/plugins/draggable';
 import Vue from 'vue';
 
 const Default = {
@@ -15,7 +16,8 @@ const Default = {
   timeout: 0,
   width: false,
   global: false,
-  noPadding: false
+  noPadding: false,
+  draggable: false
 };
 
 const TYPE = {
@@ -182,6 +184,33 @@ class Notify {
       $container.style.width = `${param.width}px`;
     }
 
+    if (param.draggable) {
+      utils.addClass($body, 'h-notify-draggable');
+      let x = 0;
+      let y = 0;
+      let rect = null;
+      let header = $container.querySelector('.h-modal-header');
+      if (header) {
+        this.drag = new Draggable(header, {
+          start(event) {
+            x = event.clientX;
+            y = event.clientY;
+            rect = $container.getBoundingClientRect();
+            $container.style.left = `${rect.left}px`;
+            $container.style.top = `${rect.top}px`;
+            $container.style.transform = 'initial';
+            $container.style.transition = 'none';
+          },
+          drag(event) {
+            let offsetX = event.clientX - x;
+            let offsetY = event.clientY - y;
+            $container.style.left = `${rect.left + offsetX}px`;
+            $container.style.top = `${rect.top + offsetY}px`;
+          }
+        });
+      }
+    }
+
     let parentDom = param.parent || document.body;
     if (param.type == 'h-notice' && parentDom.hasChildNodes()) {
       parentDom.insertBefore($body, parentDom.firstChild);
@@ -278,6 +307,10 @@ class Notify {
       that.vm.$destroy();
     }
 
+    if (this.drag) {
+      this.drag.destroy();
+    }
+
     let body = document.documentElement;
     body.style.overflow = '';
     body.style.paddingRight = '';

themes/components/modal.less

@@ -108,6 +108,14 @@
       }
     }
   }
+
+
+
+  &.@{notify-prefix}-draggable{
+    .h-modal-header, header:first-child {
+      cursor: move;
+    }
+  }
 }