From 1697da112a9b9f529fad2f54c62aecd7bbb614e6 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Fri, 3 Apr 2020 16:44:23 -0400 Subject: [WEBCARDS] Update some webcards stuff --- webcards/scripts/cards/drag.js | 83 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 webcards/scripts/cards/drag.js (limited to 'webcards/scripts/cards/drag.js') diff --git a/webcards/scripts/cards/drag.js b/webcards/scripts/cards/drag.js new file mode 100644 index 0000000..cce1e72 --- /dev/null +++ b/webcards/scripts/cards/drag.js @@ -0,0 +1,83 @@ +function MultiDrag() { + this.del = false; + this.drag = []; + window.addEventListener("mousemove", this.update.bind(this)); + document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this)); +} + +MultiDrag.prototype = { + addDragEl: function(el, ox, oy, px, py, pt) { + if(this.del) + return; + + el.style.transitionDuration = "0.04s"; + + this.drag.push({ + e: el, + osx: ox, + osy: oy, + prx: px, + pry: py, + ptd: pt + }); + + return this.drag.length - 1; + }, + + startDragging: function(mevent) { + if(this.del) + return; + + console.log(mevent); + + if(mevent.button != 0) + return; + + let pos = mevent.target.getBoundingClientRect(); + + return this.addDragEl( + mevent.currentTarget, + mevent.clientX - pos.left, + mevent.clientY - pos.top, + mevent.currentTarget.style.left, + mevent.currentTarget.style.top, + mevent.currentTarget.style.transitionDuration + ); + }, + + stopDragging: function(i) { + this.del = true; + + if (i < 0 || i >= this.drag.length) + return; + + this.drag[i].e.style.transitionDuration = this.drag[i].ptd; + this.drag[i].e.style.left = this.drag[i].prx; + this.drag[i].e.style.top = this.drag[i].pry; + + this.drag.splice(i, 1); + + this.del = false; + }, + + stopDraggingAll: function() { + 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) { + for (let i = 0; i < this.drag.length && !this.del; i++) { + this.drag[i].e.style.left = e.clientX - this.drag[i].osx + "px"; + this.drag[i].e.style.top = e.clientY - this.drag[i].osy + "px"; + } + } +}; \ No newline at end of file -- cgit v1.2.3