diff --git a/e2e/draggable.js b/e2e/draggable.js index 18f5771..15d45a5 100644 --- a/e2e/draggable.js +++ b/e2e/draggable.js @@ -121,23 +121,30 @@ describe('Draggable with Pointer events', () => { }); draggable.bindTo(el); + }); + it("triggers release on pointerup", () => { pointerdown(el, 100, 200); pointermove(el, 101, 201); pointerup(el, 101, 201); + + expect(handler).toHaveBeenCalledTimes(1); }); - it("triggers release on pointerup", () => { - expect(handler).toHaveBeenCalled(); + it("does not trigger release if the element was not pressed", () => { + pointerup(el, 100, 200); + expect(handler).not.toHaveBeenCalled(); }); it("disposes drag handlers properly", () => { draggable.destroy(); draggable = null; + pointerdown(el, 100, 200); + pointermove(el, 101, 201); pointerup(el, 101, 201); - expect(handler).toHaveBeenCalledTimes(1); + expect(handler).not.toHaveBeenCalled(); }); it("restores auto touch-action on pointerup", () => { @@ -152,6 +159,7 @@ describe('Draggable with Pointer events', () => { pointerup(el, 100, 200); expect(el.style.touchAction).toEqual('pan-y'); }); + }); describe("with mouseOnly set to true", () => { diff --git a/src/main.js b/src/main.js index 4f54cb5..5e7a1f5 100644 --- a/src/main.js +++ b/src/main.js @@ -101,9 +101,12 @@ export class Draggable { this._pointerdown = (e) => { if (e.isPrimary && e.button === 0) { bind(this._element, "pointermove", this._pointermove); + bind(this._element, "pointerup", this._pointerup); + this._touchAction = e.target.style.touchAction; e.target.style.touchAction = "none"; e.target.setPointerCapture(e.pointerId); + this._pressHandler(e); } }; @@ -117,8 +120,11 @@ export class Draggable { this._pointerup = (e) => { if (e.isPrimary) { unbind(this._element, "pointermove", this._pointermove); + unbind(this._element, "pointerup", this._pointerup); + e.target.style.touchAction = this._touchAction; e.target.releasePointerCapture(e.pointerId); + this._releaseHandler(e); } }; @@ -142,7 +148,6 @@ export class Draggable { if (this._usePointers()) { bind(element, "pointerdown", this._pointerdown); - bind(element, "pointerup", this._pointerup); return; }