1 files changed, 72 insertions, 39 deletions

diff --git a/webcards/scripts/cards/drag.js b/webcards/scripts/cards/drag.js
index 54fb797..3b02eff 100644
--- a/webcards/scripts/cards/drag.js
+++ b/webcards/scripts/cards/drag.js
@@ -1,17 +1,23 @@
-function MultiDrag() {
-    this.del = false;
-    this.drag = [];
-    window.addEventListener("mousemove", this.update.bind(this));
-    document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this));
-}
+'use strict';
 
-MultiDrag.prototype = {
-    addDragEl: function(el, ox, oy, px, py, pt) {
+class MultiDrag extends EventTarget {
+    del = false;
+    drag = [];
+    cbs = [];
+
+    constructor() {
+        super();
+
+        window.addEventListener("mousemove", this.update.bind(this));
+        document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this));
+    }
+
+    addDragEl(el, ox, oy, px, py, pt) {
         if(this.del)
             return;
-
+    
         el.style.transitionDuration = "0.04s";
-
+    
         this.drag.push({
             e: el,
             osx: ox,
@@ -20,76 +26,103 @@ MultiDrag.prototype = {
             pry: py,
             ptd: pt
         });
-
+    
         return this.drag.length - 1;
-    },
+    }
 
-    dragging: function(e) {
+    dragging(e) {
         for(let i in this.drag) {
             if(this.drag[i].e == e)
                 return true;
         }
         return false;
-    },
+    }
 
-    startDragging: function(e) {
+    startDragging(e) {
         if(this.del)
             return;
-
+    
         console.log(e);
-
+    
         if(e.button != 0)
             return;
-
-        let pos
-        if(e.target.parentElement != null)
-            pos = e.target.parentElement.getBoundingClientRect();
-        else
-            pos = e.target.getBoundingClientRect();
+        
+        this.dispatchEvent(new Event("dragstart", {target: e.target}));
 
         return this.addDragEl(
             e.target,
-            e.pageX,
-            e.pageY,
+            e.pageX - parseInt(e.target.style.left),
+            e.pageY - parseInt(e.target.style.top),
             e.target.style.left,
             e.target.style.top,
             e.target.style.transitionDuration
         );
-    },
-
-    stopDragging: function(i) {
+    }
+    
+    stopDragging(i) {
+        if(this.del)
+            return;
+        
         this.del = true;
-
+    
         if (i < 0 || i >= this.drag.length)
             return;
         
+        var cap = {target: null, x: 0, y: 0};
+        
         this.drag[i].e.style.transitionDuration = this.drag[i].ptd;
+        
+        cap.x = parseInt(this.drag[i].e.style.left);
         this.drag[i].e.style.left = this.drag[i].prx;
+
+        cap.y = parseInt(this.drag[i].e.style.top);
         this.drag[i].e.style.top = this.drag[i].pry;
+    
+        cap.target = this.drag.splice(i, 1).e;
+    
+        this.del = false;
 
-        this.drag.splice(i, 1);
+        this.dispatchEvent(new Event("dragstop", cap));
+    }
 
-        this.del = false;
-    },
+    stopDraggingEl(el) {
+        for(let d of this.drag) {
+            if(d.e === el)
+                this.stopDragging(this.drag.indexOf(d));
+        }
+    }
 
-    stopDraggingAll: function() {
+    stopDraggingAll() {
+        if(this.del)
+            return;
+        
         this.del = true;
-
+    
         while (this.drag.length > 0) {
             this.drag[0].e.style.transitionDuration = this.drag[0].ptd;
             this.drag[0].e.style.left = this.drag[0].prx;
             this.drag[0].e.style.top = this.drag[0].pry;
-
+    
             this.drag.shift();
         }
-
+    
         this.del = false;
-    },
 
-    update: function(e) {
+        this.dispatchEvent(new Event("dragstopall"));
+    }
+
+    update(e) {
         for (let i = 0; i < this.drag.length && !this.del; i++) {
             this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px";
             this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px";
         }
     }
-};
\ No newline at end of file
+
+    addTarget(e) {
+        e.addEventListener("mousedown", this.startDragging.bind(this));
+        e.addEventListener("mouseup", this.stopDraggingEl.apply(this, [e]))
+    }
+
+    removeTarget (e) {
+    }
+}
\ No newline at end of file