js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix drag bug; closes #1905

Browse Source
This commit is contained in:
Cory LaViska
2025-12-29 11:27:20 -05:00
parent 7e5f18ea97
commit 61f89df17b
3 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
cspell.json
View File

@@ -151,6 +151,7 @@
"ParamagicDev",
"peta",
"petabit",
"pointercancel",
"Preact",
"preconnect",
"prerendered",
@@ -204,6 +205,8 @@
"thead",
"Themer",
"tinycolor",
"touchcancel",
"touchend",
"transitionend",
"treeitem",
"treeshaking",

2
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -14,6 +14,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
## Next
- Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
- Fixed a bug in draggable elements that caused a TypeError on `touchend` events when `event.touches` was empty
- Added `pointercancel` and `touchcancel` event handling to draggable elements to prevent drags from getting stuck
## 3.1.0

10
packages/webawesome/src/internal/drag.ts
View File

@@ -99,20 +99,24 @@ export class DraggableElement {
document.addEventListener('pointerup', this.handleDragStop);
document.addEventListener('pointermove', this.handleDragMove);
document.addEventListener('pointercancel', this.handleDragStop);
document.addEventListener('touchend', this.handleDragStop);
document.addEventListener('touchmove', this.handleDragMove);
document.addEventListener('touchcancel', this.handleDragStop);
this.options.start(clientX, clientY);
};
private handleDragStop = (event: PointerEvent | TouchEvent) => {
const clientX = 'touches' in event ? event.touches[0].clientX : (event as PointerEvent).clientX;
const clientY = 'touches' in event ? event.touches[0].clientY : (event as PointerEvent).clientY;
const clientX = 'changedTouches' in event ? event.changedTouches[0].clientX : (event as PointerEvent).clientX;
const clientY = 'changedTouches' in event ? event.changedTouches[0].clientY : (event as PointerEvent).clientY;
this.isDragging = false;
document.removeEventListener('pointerup', this.handleDragStop);
document.removeEventListener('pointermove', this.handleDragMove);
document.removeEventListener('pointercancel', this.handleDragStop);
document.removeEventListener('touchend', this.handleDragStop);
document.removeEventListener('touchmove', this.handleDragMove);
document.removeEventListener('touchcancel', this.handleDragStop);
this.options.stop(clientX, clientY);
};
@@ -141,8 +145,10 @@ export class DraggableElement {
public stop() {
document.removeEventListener('pointerup', this.handleDragStop);
document.removeEventListener('pointermove', this.handleDragMove);
document.removeEventListener('pointercancel', this.handleDragStop);
document.removeEventListener('touchend', this.handleDragStop);
document.removeEventListener('touchmove', this.handleDragMove);
document.removeEventListener('touchcancel', this.handleDragStop);
this.element.removeEventListener('pointerdown', this.handleDragStart);
if (supportsTouch) {
this.element.removeEventListener('touchstart', this.handleDragStart);