Merge pull request #24 from Oliver-Akins/fix/#14

Make attribute drag and drop require using the drag handle
This commit is contained in:
Oliver 2025-07-25 22:16:44 -06:00 committed by GitHub
commit 9ce0e71b21
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 9 additions and 2 deletions

View file

@ -71,7 +71,7 @@ export class AttributeManager extends HandlebarsApplicationMixin(ApplicationV2)
}; };
new DragDrop.implementation({ new DragDrop.implementation({
dragSelector: `[data-attribute]`, dragSelector: `.draggable`,
permissions: { permissions: {
dragstart: this._canDragStart.bind(this), dragstart: this._canDragStart.bind(this),
drop: this._canDragDrop.bind(this), drop: this._canDragDrop.bind(this),
@ -194,7 +194,7 @@ export class AttributeManager extends HandlebarsApplicationMixin(ApplicationV2)
}; };
_onDragStart(event) { _onDragStart(event) {
const target = event.currentTarget; const target = event.currentTarget.closest(`[data-attribute]`);
if (`link` in event.target.dataset) { return }; if (`link` in event.target.dataset) { return };
let dragData; let dragData;
@ -208,6 +208,7 @@ export class AttributeManager extends HandlebarsApplicationMixin(ApplicationV2)
}; };
if (!dragData) { return }; if (!dragData) { return };
event.dataTransfer.setDragImage(target, 16, 23);
event.dataTransfer.setData(`text/plain`, JSON.stringify(dragData)); event.dataTransfer.setData(`text/plain`, JSON.stringify(dragData));
}; };

View file

@ -23,6 +23,11 @@
flex-direction: column; flex-direction: column;
} }
} }
/* Used to style the actual element as dragging */
&:has(taf-icon:active) {
background: var(--background);
}
} }
taf-icon { taf-icon {

View file

@ -8,6 +8,7 @@
name="icons/drag-handle" name="icons/drag-handle"
var:stroke="currentColor" var:stroke="currentColor"
var:fill="currentColor" var:fill="currentColor"
class="draggable"
></taf-icon> ></taf-icon>
{{#if attr.isNew}} {{#if attr.isNew}}
<input <input