diff options
-rw-r--r-- | scripts/cards/drag.js | 78 | ||||
-rw-r--r-- | scripts/gui/table.js | 5 | ||||
-rw-r--r-- | styles/client/card.css | 1 |
3 files changed, 54 insertions, 30 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 diff --git a/scripts/gui/table.js b/scripts/gui/table.js index c4878a0..7199f83 100644 --- a/scripts/gui/table.js +++ b/scripts/gui/table.js @@ -4,9 +4,8 @@ class Table{ this.root = e; this.drag = drag; - this.root.addEventListener("mouseup", drag.stopDraggingAll.bind(drag)); - - //drag.addEventListener("dragstop", ); + drag.addEventListener("dragstart", (e) => {console.log(e)}); + drag.addEventListener("dragstop", (e) => {console.log(e)}); this.socket = socket; diff --git a/styles/client/card.css b/styles/client/card.css index de49175..8172e41 100644 --- a/styles/client/card.css +++ b/styles/client/card.css @@ -19,6 +19,7 @@ card card:hover { box-shadow: 0 0 10px var(--card-hover); + z-index: 3; } card > * { |