Jancat · May 19, 2018 07:04 · May 19, 2018 · May 15, 2018
diff --git a/script.js b/script.js
@@ -4,7 +4,7 @@
 
 window.onload = function() {
   const DragDrop = (function() {
-    const dragging = null // 记录拖拽的对象
+    let dragging = null // 记录拖拽的对象
     var diffX = 0 // 记录鼠标与正方形边缘的距离
     var diffY = 0 // 同上
 
@@ -22,7 +22,7 @@ window.onload = function() {
 
         // 实时修改正方形的position中的 top 和 left值
         case 'mousemove':
-          if (dragging !== null) {
+          if (dragging !== null && event.clientX >= diffX && event.clientY >= diffY) {
             dragging.style.left = event.clientX - diffX + 'px'
             dragging.style.top = event.clientY - diffY + 'px'
           }
@@ -38,9 +38,7 @@ window.onload = function() {
 
     // 返回对象
     return {
-      /*
-				触发，监听以上三个事件，监听对象document
-			*/
+      // 触发，监听以上三个事件，监听对象document
       fire: function() {
         document.addEventListener('mousedown', dragEvent, false)
         document.addEventListener('mousemove', dragEvent, false)

diff --git a/drag-drop.markdown b/drag-drop.markdown
@@ -0,0 +1,7 @@
+drag-drop
+---------
+
+
+A [Pen](https://codepen.io/Jancat/pen/erLBYa) by [君临](https://codepen.io/Jancat) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/Jancat/pen/erLBYa/license).
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<div class="square"></div>
diff --git a/script.js b/script.js
@@ -0,0 +1,53 @@
+// 实现正方形的拖拽
+// 记录鼠标位置，赋予正方形position 属性 的 top 和 left
+// 记录事件 mousedown mousemove mouseup
+
+window.onload = function() {
+  const DragDrop = (function() {
+    const dragging = null // 记录拖拽的对象
+    var diffX = 0 // 记录鼠标与正方形边缘的距离
+    var diffY = 0 // 同上
+
+    function dragEvent(event) {
+      var that = event.target
+
+      // 判断事件类型
+      switch (event.type) {
+        // 记录鼠标点击处的位置，与目标的位置做差值
+        case 'mousedown':
+          dragging = that
+          diffX = event.clientX - that.offsetLeft
+          diffY = event.clientY - that.offsetTop
+          break
+
+        // 实时修改正方形的position中的 top 和 left值
+        case 'mousemove':
+          if (dragging !== null) {
+            dragging.style.left = event.clientX - diffX + 'px'
+            dragging.style.top = event.clientY - diffY + 'px'
+          }
+          break
+
+        // 将拖拽对象置为 null
+        case 'mouseup':
+          dragging = null
+          break
+      }
+      // ... do something
+    }
+
+    // 返回对象
+    return {
+      /*
+				触发，监听以上三个事件，监听对象document
+			*/
+      fire: function() {
+        document.addEventListener('mousedown', dragEvent, false)
+        document.addEventListener('mousemove', dragEvent, false)
+        document.addEventListener('mouseup', dragEvent, false)
+      },
+    }
+  })()
+
+  DragDrop.fire()
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,7 @@
+.square {
+	width: 100px;
+	height: 100px;
+	border: 1px solid #000;
+	background-color: #000;
+	position: absolute;
+}
No results found