summaryrefslogtreecommitdiff
path: root/webcards/scripts/cards/drag.js
diff options
context:
space:
mode:
authorKyle Gunger <corechg@gmail.com>2020-04-03 16:44:23 -0400
committerKyle Gunger <corechg@gmail.com>2020-04-03 16:44:23 -0400
commit1697da112a9b9f529fad2f54c62aecd7bbb614e6 (patch)
tree68c7cd383107e824953b6aa213d05d9a6842b73f /webcards/scripts/cards/drag.js
parent3040a822085adeb9025ddc1a4573cf37cb37d377 (diff)
[WEBCARDS] Update some webcards stuff
Diffstat (limited to 'webcards/scripts/cards/drag.js')
-rw-r--r--webcards/scripts/cards/drag.js83
1 files changed, 83 insertions, 0 deletions
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