Drag and drop

src/module/vue/components/foe-browser/foe-browser-row.vue

@@ -4,6 +4,10 @@
 			[$style.article]: true,
 			[$style.variant]: foe.isVariant
 		}"
+		draggable="true"
+		:data-uuid="foe.uuid"
+		@dragstart="dragStart"
+		@dragend="dragEnd"
 	>
 		<header :class="$style.header">
 			<button
@@ -52,9 +56,25 @@ import FontIcon from 'component:icon/font-icon.vue'
 import CollapseTransition from 'component:transition/collapse-transition.vue'
 import FoeBrowserContent from 'component:foe-browser/foe-browser-content.vue'
 
-defineProps<{ foe: DisplayFoe }>()
+const props = defineProps<{ foe: DisplayFoe }>()
 
 const expanded = ref(false)
+
+function dragStart(ev) {
+	ev.dataTransfer.setData(
+		'text/plain',
+		JSON.stringify({
+			type: 'FoeBrowserData',
+			uuid: props.foe.uuid
+		})
+	)
+
+	CONFIG.IRONSWORN.emitter.emit('dragStart', 'progress')
+}
+
+function dragEnd() {
+	CONFIG.IRONSWORN.emitter.emit('dragEnd', 'progress')
+}
 </script>
 
 <style lang="scss" module>

src/module/vue/vueactorsheet.ts

@@ -50,7 +50,7 @@ export abstract class VueActorSheet extends VueAppMixin(ActorSheet) {
 	protected async _onDrop(event: DragEvent) {
 		const data = (TextEditor as any).getDragEventData(event)
 
-		if (data.type === 'AssetBrowserData') {
+		if (['AssetBrowserData', 'FoeBrowserData'].includes(data.type)) {
 			const document = (await fromUuid(data.uuid)) as
 				| StoredDocument<IronswornItem>
 				| undefined