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

Make attribute drag and drop require using the drag handle

module/apps/AttributeManager.mjs

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

styles/Apps/AttributeManager.css

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

templates/AttributeManager/attribute-list.hbs

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