[PR] Changing the drag targets in the inventory item v2 template (#1443)

* Adding styles to make the text div take up the full area of the inventory items

* Moving the draggable spots to internal divs and images

* For better visuals in dragDrop, always make the drag image the first image selected

* Fixing the dragDrop behavior on the sidebar, which still uses the classic layout

* Fixing other uses of dragDrop to handle the layout change

* Moving the draggable attribute to the parent img-portrait from img directly

* Switching to the less pretty version of the drag drop in case of currency problems

* Reverting how the dragSelector DEFAULT_OPTION is set and only modifying a few

* Removing extra space in styles/less/global/inventory-item.less

Co-authored-by: Carlos Fernandez <CarlosFdez@users.noreply.github.com>

* Fixing up the character sheet to once again allow selecting the text areas

---------

Co-authored-by: Carlos Fernandez <CarlosFdez@users.noreply.github.com>

module/applications/sheets/actors/adversary.mjs

@@ -26,7 +26,7 @@ export default class AdversarySheet extends DHBaseActorSheet {
                 }
             ]
         },
-        dragDrop: [{ dragSelector: '[data-item-id][draggable="true"]', dropSelector: null }]
+        dragDrop: [{ dragSelector: '[data-item-id]', dropSelector: null }]
     };
 
     static PARTS = {

module/applications/sheets/actors/character.mjs

@@ -46,7 +46,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
         },
         dragDrop: [
             {
-                dragSelector: '[data-item-id][draggable="true"]',
+                dragSelector: '[data-item-id][draggable="true"], [data-item-id] [draggable="true"]',
                 dropSelector: null
             }
         ],
@@ -868,6 +868,15 @@ export default class CharacterSheet extends DHBaseActorSheet {
         });
     }
 
+    /** @inheritdoc */
+    async _onDragStart(event) {
+        const inventoryItem = event.currentTarget.closest('.inventory-item');
+        if (inventoryItem) {
+            event.dataTransfer.setDragImage(inventoryItem.querySelector('img'), 60, 0);
+        }
+        super._onDragStart(event);
+    }
+
     async _onDropItem(event, item) {
         if (this.document.uuid === item.parent?.uuid) {
             return super._onDropItem(event, item);

module/applications/sheets/actors/party.mjs

@@ -40,7 +40,7 @@ export default class Party extends DHBaseActorSheet {
             selectRefreshable: DaggerheartMenu.selectRefreshable,
             refreshActors: DaggerheartMenu.refreshActors
         },
-        dragDrop: [{ dragSelector: '[data-item-id][draggable="true"]', dropSelector: null }]
+        dragDrop: [{ dragSelector: '[data-item-id]', dropSelector: null }]
     };
 
     /**@override */

styles/less/global/inventory-item.less

@@ -129,7 +129,8 @@
 
             .item-label {
                 flex: 1;
-                align-self: center;
+                align-self: stretch;
+                align-content: center;
 
                 .item-name {
                     font-size: var(--font-size-14);

templates/sheets/global/partials/inventory-item-V2.hbs

@@ -18,12 +18,12 @@ Parameters:
 --}}
 
 <li class="inventory-item" data-item-id="{{item.id}}" {{#if (or (eq type 'action' ) (eq type 'attack' ))}}
-  data-action-id="{{item.id}}" {{/if}} data-item-uuid="{{item.uuid}}" data-type="{{type}}" data-no-compendium-edit="{{noCompendiumEdit}}" draggable="true">
+  data-action-id="{{item.id}}" {{/if}} data-item-uuid="{{item.uuid}}" data-type="{{type}}" data-no-compendium-edit="{{noCompendiumEdit}}">
   <div class="inventory-item-header {{#if hideContextMenu}}padded{{/if}}" {{#unless noExtensible}}data-action="toggleExtended" {{/unless}}>
     {{!-- Image --}}
     <div class="img-portait" data-action='{{ifThen (or (hasProperty item "use") (eq type "attack")) "useItem" (ifThen
       (hasProperty item "toChat" ) "toChat" "editDoc" ) }}' {{#unless hideTooltip}} {{#if (eq type 'attack' )}}
-      data-tooltip="#attack#{{item.actor.uuid}}" {{else}} data-tooltip="#item#{{item.uuid}}" {{/if}} {{/unless}}>
+      data-tooltip="#attack#{{item.actor.uuid}}" {{else}} data-tooltip="#item#{{item.uuid}}" {{/if}} {{/unless}} draggable="true">
       <img src="{{item.img}}" class="item-img {{#if isActor}}actor-img{{/if}}" />
       {{#if (or item.system.actionsList.size item.system.actionsList.length item.actionType)}}
         {{#if @root.isNPC}}
@@ -35,7 +35,7 @@ Parameters:
     </div>
 
     {{!-- Name & Tags --}}
-    <div class="item-label">
+    <div class="item-label" draggable="true">
 
       {{!-- Item Name --}}
       <span class="item-name">{{localize item.name}} {{#unless (or noExtensible (not item.system.description))}}<span class="expanded-icon"><i class="fa-solid fa-expand"></i></span>{{/unless}}</span>