From e75b53d78c6df58d3d6a484e82fae445dc5d9152 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期三, 07 四月 2021 15:55:12 +0800
Subject: [PATCH] 弹框窗口大小改变

---
 src/components/BaseNav/SolidWaste/directive/dir.js     |  104 +++++++++++++++++++++++++---------------------------
 src/components/BaseNav/PublicBounced/PublicBounced.vue |    2 
 2 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index c33fc9c..649d2e6 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="public-bounced" v-draw v-if="flag">
+  <div class="public-bounced" v-drag v-if="flag">
     <div class="public-bounced-title">
       <span>{{ displayContentTitle }}</span>
       <i class="el-icon-circle-close" @click="closePopup"></i>
diff --git a/src/components/BaseNav/SolidWaste/directive/dir.js b/src/components/BaseNav/SolidWaste/directive/dir.js
index d51b377..e58a1a5 100644
--- a/src/components/BaseNav/SolidWaste/directive/dir.js
+++ b/src/components/BaseNav/SolidWaste/directive/dir.js
@@ -1,59 +1,55 @@
 import Vue from 'vue'
-
-// 鑷畾涔夊厓绱犲疄鐜板脊妗嗘嫋鎷絒閲嶇偣]
-Vue.directive('draw', {
-  // inserted: function (el, binding, vNode) {
-  //   el.setAttribute('style', 'position: fixed; z-index: 9999')
-  // },
-  bind: function (el, bindding, vNode) {
-    el.setAttribute('draggable', true)
-    let left, top, width, height
-    el._dragstart = function (event) {
-      event.stopPropagation()
-      left = event.clientX - el.offsetLeft
-      top = event.clientY - el.offsetTop
-      width = el.offsetWidth
-      height = el.offsetHeight
-    }
-    el._checkPosition = function () { // 闃叉琚嫋鍑鸿竟鐣�
-      const width = el.offsetWidth
-      const height = el.offsetHeight
-      let left = Math.min(el.offsetLeft, document.body.clientWidth - width)
-      left = Math.max(0, left)
-      let top = Math.min(el.offsetTop, document.body.clientHeight - height)
-      top = Math.max(0, top)
-      el.style.left = left + 'px'
-      el.style.top = top + 'px'
-      el.style.width = width + 'px'
-      el.style.height = height + 'px'
-    }
-    el._dragEnd = function (event) {
-      event.stopPropagation()
-      left = event.clientX - left
-      top = event.clientY - top
-      el.style.left = left + 'px'
-      el.style.top = top + 'px'
-      el.style.width = width + 'px'
-      el.style.height = height + 'px'
-      el._checkPosition()
-    }
-    el._documentAllowDraop = function (event) {
-      event.preventDefault()
-    }
-    document.body.addEventListener('dragover', el._documentAllowDraop)
-    el.addEventListener('dragstart', el._dragstart)
-    el.addEventListener('dragend', el._dragEnd)
-    window.addEventListener('resize', el._checkPosition)
+// 浣跨敤Vue.directive()瀹氫箟涓�涓叏灞�鎸囦护
+// 1.鍙傛暟涓�锛氭寚浠ょ殑鍚嶇О锛屽畾涔夋椂鎸囦护鍓嶉潰涓嶉渶瑕佸啓v-
+// 2.鍙傛暟浜岋細鏄竴涓璞★紝璇ュ璞′腑鏈夌浉鍏崇殑鎿嶄綔鍑芥暟
+// 3.鍦ㄨ皟鐢ㄧ殑鏃跺�欏繀椤诲啓v-
+const drag = Vue.directive('drag', {
+  // 1.鎸囦护缁戝畾鍒板厓绱犱笂鍥炵珛鍒绘墽琛宐ind鍑芥暟锛屽彧鎵ц涓�娆�
+  // 2.姣忎釜鍑芥暟涓涓�涓弬鏁版案杩滄槸el锛岃〃绀虹粦瀹氭寚浠ょ殑鍏冪礌锛宔l鍙傛暟鏄師鐢焜s瀵硅薄
+  // 3.閫氳繃el.focus()鏄棤娉曡幏鍙栫劍鐐圭殑锛屽洜涓哄彧鏈夋彃鍏OM鍚庢墠鐢熸晥
+  bind: function (el) {
+    el.style.cursor = 'move' // 榧犳爣鏍峰紡鍙榤ove鏍峰紡
   },
+  // inserted琛ㄧず涓�涓厓绱狅紝鎻掑叆鍒癉OM涓細鎵цinserted鍑芥暟锛屽彧瑙﹀彂涓�娆�
+  inserted: function (el) {
+    el.onmousedown = function (e) {
+      var distX = e.pageX - el.offsetLeft
+      var distY = e.pageY - el.offsetTop
+      console.log('鍏冪礌鏈韩鐨勯珮锛�' + el.clientHeight + ',鍏冪礌鏈韩鐨勫锛�' + el.clientWidth)
 
-  unbind: function (el, bindding, vNode) {
-    document.body.removeEventListener('dragover', el._documentAllowDraop)
-    el.removeEventListener('dragstart', el._dragstart)
-    el.removeEventListener('dragend', el._dragEnd)
-    window.removeEventListener('resize', el._checkPosition)
-    delete el._documentAllowDraop
-    delete el._dragstart
-    delete el._dragEnd
-    delete el._checkPosition
+      if (e.preventDefault) {
+        e.preventDefault()
+      } else {
+        e.returnValue = false
+      }
+      // 瑙ｅ喅蹇�熸嫋鍔ㄦ粸鍚庨棶棰�
+
+      document.onmousemove = function (e) {
+        // 鐢ㄩ紶鏍囩殑浣嶇疆鍑忓幓榧犳爣鐩稿鍏冪礌鐨勪綅缃紝寰楀埌鍏冪礌鐨勪綅缃�
+        let left = e.clientX - distX
+        let top = e.clientY - distY
+
+        if (left <= 0) {
+          left = 5 // 璁剧疆鎴�5鏄负浜嗕笉绂昏竟缂樺お杩�
+        } else if (left > document.documentElement.clientWidth - el.clientWidth) {
+          // document.documentElement.clientWidth 灞忓箷鐨勫彲瑙嗗搴�
+          left = document.documentElement.clientWidth - el.clientWidth - 5
+        }
+        if (top <= 0) {
+          top = 5
+        } else if (top > document.documentElement.clientHeight - el.clientHeight) {
+          top = document.documentElement.clientHeight - el.clientHeight - 5
+        }
+        el.style.left = left + 'px'
+        el.style.top = top + 'px'
+      }
+      document.onmouseup = function () {
+        document.onmousemove = document.onmouseup = null
+      }
+    }
+  },
+  // 褰揤Node鏇存柊鐨勬椂鍊欎細鎵цupdated锛屽彲浠ヨЕ鍙戝娆�
+  updated: function (el) {
   }
 })
+export default drag

--
Gitblit v1.8.0