summaryrefslogtreecommitdiff
path: root/scripts/cards
diff options
context:
space:
mode:
authorKyle Gunger <corechg@gmail.com>2020-09-28 02:19:13 -0400
committerKyle Gunger <corechg@gmail.com>2020-09-28 02:19:13 -0400
commit04010b3b1f6ba6fc44d2cd0cd6a8a39446cd7b1d (patch)
tree992df08008432e1cf7ef9c151f84fa1812fcff88 /scripts/cards
parentdbaf69557c0d6e648120b068fec1920b9391a24a (diff)
Drag code updates
Diffstat (limited to 'scripts/cards')
-rw-r--r--scripts/cards/drag.js78
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