summaryrefslogtreecommitdiff
path: root/scripts/cards/drag.js
diff options
context:
space:
mode:
authorKyle Gunger <corechg@gmail.com>2020-09-18 12:19:44 -0400
committerKyle Gunger <corechg@gmail.com>2020-09-18 12:19:44 -0400
commitdbaf69557c0d6e648120b068fec1920b9391a24a (patch)
treef31f7b956455b1243d344d0c54d5b04e9e80fb3f /scripts/cards/drag.js
parente5515d3e1603339b4957421c9494ca619490a03d (diff)
Update from local repo
Diffstat (limited to 'scripts/cards/drag.js')
-rw-r--r--scripts/cards/drag.js128
1 files changed, 128 insertions, 0 deletions
diff --git a/scripts/cards/drag.js b/scripts/cards/drag.js
new file mode 100644
index 0000000..3b02eff
--- /dev/null
+++ b/scripts/cards/drag.js
@@ -0,0 +1,128 @@
+'use strict';
+
+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,
+ osy: oy,
+ prx: px,
+ pry: py,
+ ptd: pt
+ });
+
+ return this.drag.length - 1;
+ }
+
+ dragging(e) {
+ for(let i in this.drag) {
+ if(this.drag[i].e == e)
+ return true;
+ }
+ return false;
+ }
+
+ startDragging(e) {
+ if(this.del)
+ return;
+
+ console.log(e);
+
+ if(e.button != 0)
+ return;
+
+ this.dispatchEvent(new Event("dragstart", {target: e.target}));
+
+ return this.addDragEl(
+ e.target,
+ 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(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.dispatchEvent(new Event("dragstop", cap));
+ }
+
+ stopDraggingEl(el) {
+ for(let d of this.drag) {
+ if(d.e === el)
+ this.stopDragging(this.drag.indexOf(d));
+ }
+ }
+
+ 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;
+
+ 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";
+ }
+ }
+
+ 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