diff options
author | Kyle Gunger <corechg@gmail.com> | 2020-09-28 02:19:13 -0400 |
---|---|---|
committer | Kyle Gunger <corechg@gmail.com> | 2020-09-28 02:19:13 -0400 |
commit | 04010b3b1f6ba6fc44d2cd0cd6a8a39446cd7b1d (patch) | |
tree | 992df08008432e1cf7ef9c151f84fa1812fcff88 /scripts/cards | |
parent | dbaf69557c0d6e648120b068fec1920b9391a24a (diff) |
Drag code updates
Diffstat (limited to 'scripts/cards')
-rw-r--r-- | scripts/cards/drag.js | 78 |
1 files changed, 51 insertions, 27 deletions
diff --git a/scripts/cards/drag.js b/scripts/cards/drag.js index 3b02eff..807e0c5 100644 --- a/scripts/cards/drag.js +++ b/scripts/cards/drag.js @@ -3,31 +3,39 @@ class MultiDrag extends EventTarget { del = false; drag = []; - cbs = []; + mouse = [null, null]; - constructor() { + constructor(ret = false) { super(); window.addEventListener("mousemove", this.update.bind(this)); + window.addEventListener("mouseup", this.stopDraggingAll.bind(this)); document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this)); + + this.ret = ret; } addDragEl(el, ox, oy, px, py, pt) { if(this.del) return; - el.style.transitionDuration = "0.04s"; - - this.drag.push({ + el.style.transitionDuration = "0s"; + + let push = { e: el, osx: ox, osy: oy, - prx: px, - pry: py, ptd: pt - }); + }; + + if(this.ret) { + push.prx = px; + push.pry = py; + } + + this.drag.push(push); - return this.drag.length - 1; + return push; } dragging(e) { @@ -46,10 +54,10 @@ class MultiDrag extends EventTarget { if(e.button != 0) return; - - this.dispatchEvent(new Event("dragstart", {target: e.target})); - return this.addDragEl( + var cap = new Event("dragstart"); + + cap.drag = this.addDragEl( e.target, e.pageX - parseInt(e.target.style.left), e.pageY - parseInt(e.target.style.top), @@ -57,6 +65,8 @@ class MultiDrag extends EventTarget { e.target.style.top, e.target.style.transitionDuration ); + + this.dispatchEvent(cap); } stopDragging(i) { @@ -68,21 +78,22 @@ class MultiDrag extends EventTarget { if (i < 0 || i >= this.drag.length) return; - var cap = {target: null, x: 0, y: 0}; + var cap = new Event("dragstop"); + cap.x = this.mouse[0]; + cap.y = this.mouse[1]; 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; + if(this.ret) { + this.drag[i].e.style.left = this.drag[i].prx; + this.drag[i].e.style.top = this.drag[i].pry; + } + + cap.drag = this.drag.splice(i, 1); this.del = false; - this.dispatchEvent(new Event("dragstop", cap)); + this.dispatchEvent(cap); } stopDraggingEl(el) { @@ -97,21 +108,34 @@ class MultiDrag extends EventTarget { return; this.del = true; - + + var cap = new Event("dragstop"); + + cap.x = this.mouse[0]; + cap.y = this.mouse[1]; + + cap.drag = []; + 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; + + if(this.ret) { + this.drag[0].e.style.left = this.drag[0].prx; + this.drag[0].e.style.top = this.drag[0].pry; + } - this.drag.shift(); + cap.drag.push(this.drag.shift()); } this.del = false; - this.dispatchEvent(new Event("dragstopall")); + this.dispatchEvent(cap); } update(e) { + this.mouse[0] = e.pageX; + this.mouse[1] = e.pageY; + 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"; @@ -120,9 +144,9 @@ class MultiDrag extends EventTarget { addTarget(e) { e.addEventListener("mousedown", this.startDragging.bind(this)); - e.addEventListener("mouseup", this.stopDraggingEl.apply(this, [e])) } removeTarget (e) { + e.removeEventListener("mousedown", this.startDragging.bind(this)); } }
\ No newline at end of file |