нативные события драга при полифиле

Katochimoto · Nov 1, 2016 · a7a9633 · a7a9633
1 parent ae0595a
commit a7a9633
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 18 deletions.
diff --git a/dist/x-bubbles.js b/dist/x-bubbles.js
@@ -268,6 +268,7 @@ var XBubbles =
 
 	exports.scrollX = scrollX;
 	exports.scrollY = scrollY;
+	exports.dispatch = dispatch;
 
 	exports.pageX = function (event) {
 	    return event.pageX === null && event.clientX !== null ? event.clientX + scrollX() : event.pageX;
@@ -828,7 +829,12 @@ var XBubbles =
 	exports.EV = {
 	    BUBBLE_EDIT: 'bubble-edit',
 	    BUBBLE_INPUT: 'bubble-input',
-	    CHANGE: 'change'
+	    CHANGE: 'change',
+	    DRAGEND: 'dragend',
+	    DRAGENTER: 'dragenter',
+	    DRAGLEAVE: 'dragleave',
+	    DRAGSTART: 'dragstart',
+	    DROP: 'drop'
 	};
 
 /***/ },
@@ -2022,6 +2028,7 @@ var XBubbles =
 	var _require = __webpack_require__(7);
 
 	var CLS = _require.CLS;
+	var EV = _require.EV;
 
 	var _require2 = __webpack_require__(15);
 
@@ -2059,8 +2066,8 @@ var XBubbles =
 	        onMouseup: onMouseup.bind(this, nodeSet),
 	        onMousemove: events.throttle(onMousemove.bind(this, nodeSet)),
 	        onScroll: events.throttle(onScroll.bind(this, nodeSet)),
-	        nodeOffsetX: events.pageX(event) - nodeBubble.offsetLeft,
-	        nodeOffsetY: events.pageY(event) - nodeBubble.offsetTop,
+	        nodeOffsetX: event.offsetX,
+	        nodeOffsetY: event.offsetY,
 	        x: 0,
 	        y: 0
 	    };
@@ -2090,8 +2097,11 @@ var XBubbles =
 	    }
 
 	    if (currentMoveSet) {
-	        currentMoveSet.classList.remove(CLS.DROPZONE);
+	        var _ = currentMoveSet;
 	        currentMoveSet = null;
+
+	        _.classList.remove(CLS.DROPZONE);
+	        events.dispatch(_, EV.DRAGLEAVE, { bubbles: false, cancelable: false });
 	    }
 
 	    if (currentDragSet) {
@@ -2113,8 +2123,12 @@ var XBubbles =
 	                }
 	            }
 
-	            currentDragSet.classList.remove(CLS.DRAGSTART);
+	            var _ = currentDragSet;
 	            currentDragSet = null;
+
+	            _.classList.remove(CLS.DRAGSTART);
+	            events.dispatch(_, EV.DROP, { bubbles: false, cancelable: false });
+	            events.dispatch(_, EV.DRAGEND, { bubbles: false, cancelable: false });
 	        })();
 	    }
 	}
@@ -2151,6 +2165,8 @@ var XBubbles =
 	        currentDragElement = document.body.appendChild(document.createElement('div'));
 	        currentDragElement.style.cssText = 'position:absolute;z-index:9999;pointer-events:none;top:0;left:0;';
 	        currentDragElement.appendChild(moveElement);
+
+	        events.dispatch(currentDragSet, EV.DRAGSTART, { bubbles: false, cancelable: false });
 	    }
 
 	    drag.x = event.clientX;
@@ -2163,13 +2179,18 @@ var XBubbles =
 	            currentMoveSet.classList.remove(CLS.DROPZONE);
 	            nodeSet.classList.add(CLS.DROPZONE);
 	            currentMoveSet = nodeSet;
+	            events.dispatch(currentMoveSet, EV.DRAGENTER, { bubbles: false, cancelable: false });
 	        } else if (!currentMoveSet) {
 	            nodeSet.classList.add(CLS.DROPZONE);
 	            currentMoveSet = nodeSet;
+	            events.dispatch(currentMoveSet, EV.DRAGENTER, { bubbles: false, cancelable: false });
 	        }
 	    } else if (currentMoveSet) {
-	        currentMoveSet.classList.remove(CLS.DROPZONE);
+	        var _ = currentMoveSet;
 	        currentMoveSet = null;
+
+	        _.classList.remove(CLS.DROPZONE);
+	        events.dispatch(_, EV.DRAGLEAVE, { bubbles: false, cancelable: false });
 	    }
 	}
 

diff --git a/dist/x-bubbles.min.js b/dist/x-bubbles.min.js
diff --git a/dist/x-bubbles.min.js.map b/dist/x-bubbles.min.js.map
diff --git a/docs/x-bubbles.min.js b/docs/x-bubbles.min.js
diff --git a/docs/x-bubbles.min.js.map b/docs/x-bubbles.min.js.map
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "x-bubbles",
   "description": "Bubbles",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "keywords": [],
   "homepage": "https://github.com/Katochimoto/x-bubbles",
   "author": {

diff --git a/src/core/constant.js b/src/core/constant.js
@@ -23,4 +23,9 @@ exports.EV = {
     BUBBLE_EDIT: 'bubble-edit',
     BUBBLE_INPUT: 'bubble-input',
     CHANGE: 'change',
+    DRAGEND: 'dragend',
+    DRAGENTER: 'dragenter',
+    DRAGLEAVE: 'dragleave',
+    DRAGSTART: 'dragstart',
+    DROP: 'drop',
 };
diff --git a/src/core/drag/mouse.js b/src/core/drag/mouse.js
@@ -3,7 +3,7 @@ const events = require('../events');
 const select = require('../select');
 const bubbleset = require('../bubbleset');
 const Modernizr = require('modernizr');
-const { CLS } = require('../constant');
+const { CLS, EV } = require('../constant');
 const { getDragImage, DRAG_IMG_WIDTH } = require('./common');
 
 let currentDragSet = null;
@@ -36,8 +36,8 @@ function onMousedown(event) {
         onMouseup: onMouseup.bind(this, nodeSet),
         onMousemove: events.throttle(onMousemove.bind(this, nodeSet)),
         onScroll: events.throttle(onScroll.bind(this, nodeSet)),
-        nodeOffsetX: events.pageX(event) - nodeBubble.offsetLeft,
-        nodeOffsetY: events.pageY(event) - nodeBubble.offsetTop,
+        nodeOffsetX: event.offsetX,
+        nodeOffsetY: event.offsetY,
         x: 0,
         y: 0
     };
@@ -67,8 +67,11 @@ function onMouseup(dragSet, event) {
     }
 
     if (currentMoveSet) {
-        currentMoveSet.classList.remove(CLS.DROPZONE);
+        const _ = currentMoveSet;
         currentMoveSet = null;
+
+        _.classList.remove(CLS.DROPZONE);
+        events.dispatch(_, EV.DRAGLEAVE, { bubbles: false, cancelable: false });
     }
 
     if (currentDragSet) {
@@ -87,8 +90,12 @@ function onMouseup(dragSet, event) {
             }
         }
 
-        currentDragSet.classList.remove(CLS.DRAGSTART);
+        const _ = currentDragSet;
         currentDragSet = null;
+
+        _.classList.remove(CLS.DRAGSTART);
+        events.dispatch(_, EV.DROP, { bubbles: false, cancelable: false });
+        events.dispatch(_, EV.DRAGEND, { bubbles: false, cancelable: false });
     }
 }
 
@@ -124,6 +131,8 @@ function onMousemove(dragSet, event) {
         currentDragElement = document.body.appendChild(document.createElement('div'));
         currentDragElement.style.cssText = 'position:absolute;z-index:9999;pointer-events:none;top:0;left:0;';
         currentDragElement.appendChild(moveElement);
+
+        events.dispatch(currentDragSet, EV.DRAGSTART, { bubbles: false, cancelable: false });
     }
 
     drag.x = event.clientX;
@@ -136,15 +145,20 @@ function onMousemove(dragSet, event) {
             currentMoveSet.classList.remove(CLS.DROPZONE);
             nodeSet.classList.add(CLS.DROPZONE);
             currentMoveSet = nodeSet;
+            events.dispatch(currentMoveSet, EV.DRAGENTER, { bubbles: false, cancelable: false });
 
         } else if (!currentMoveSet) {
             nodeSet.classList.add(CLS.DROPZONE);
             currentMoveSet = nodeSet;
+            events.dispatch(currentMoveSet, EV.DRAGENTER, { bubbles: false, cancelable: false });
         }
 
     } else if (currentMoveSet) {
-        currentMoveSet.classList.remove(CLS.DROPZONE);
+        const _ = currentMoveSet;
         currentMoveSet = null;
+
+        _.classList.remove(CLS.DROPZONE);
+        events.dispatch(_, EV.DRAGLEAVE, { bubbles: false, cancelable: false });
     }
 }
 

diff --git a/src/core/events.js b/src/core/events.js
@@ -10,6 +10,7 @@ const text = require('./text');
 
 exports.scrollX = scrollX;
 exports.scrollY = scrollY;
+exports.dispatch = dispatch;
 
 exports.pageX = function (event) {
     return (event.pageX === null && event.clientX !== null) ?