preparing moving of locations

frontend/src/routes/stock/Index.svelte

@@ -10,10 +10,11 @@
     import Notes            from '../notes/RelatedNotes.svelte';
     import Tags             from '../tags/TagList.svelte';
 
-    let loc_data = $derived.by(loadLocation);
-    let item = $state(null);
-    let location = $state(null);
-    let draggedItem = $state(null)
+    let loc_data        = $derived.by(loadLocation);
+    let item            = $state(null);
+    let location        = $state(null);
+    let draggedItem     = $state(null)
+    let draggedLocation = $state(null)
 
     $effect(() => {
         // This effect runs whenever `location` changes
@@ -37,6 +38,16 @@
         } else error(res);
     }
 
+    function drag_item(item){
+        draggedLocation = null;
+        draggedItem = item;
+    }
+
+    function drag_location(loc){
+        draggedItem = null;
+        draggedLocation = loc;
+    }
+
     function dropNestedLocation(locations,loc){
         for (let [idx,entry] of locations.entries()){
             if (entry.id == loc.id){
@@ -49,8 +60,9 @@
     }
 
     async function move_dragged_to(new_loc){
-        const data = { item : draggedItem.id, target: new_loc.id };
-        const url = api('stock/move_item');
+        console.log({move_dragged_to:JSON.parse(JSON.stringify(new_loc))});
+        const data = draggedItem ? { item : draggedItem.id, target: new_loc.id } : { location : draggedLocation.id, target: new_loc.id }
+        const url = api(draggedItem ? 'stock/move_item' : 'stock/move_location');
         const res = await fetch(url,{
             credentials : 'include',
             method      : 'PATCH',
@@ -118,7 +130,12 @@
         {#each top_level as realm,idx}
         <h3>{realm.name}</h3>
         {#if realm.locations}
-        <Locations locations={realm.locations} parent={realm.parent} bind:selected={location} {move_dragged_to} />
+        <Locations
+                locations={realm.locations}
+                parent={realm.parent}
+                bind:selected={location}
+                {move_dragged_to}
+                drag_start={drag_location} />
         {/if}
         {/each}
         {/if}
@@ -130,7 +147,7 @@
         {#if location}
         <h3>{location.name} <button class="symbol" title={t('delete_object',{object:t('location')})} onclick={e => deleteLocation(location)}></button></h3>
         {/if}
-        <ItemList items={data?.items.sort((a,b) => a.code.localeCompare(b.code))} bind:selected={item} drag_start={item => draggedItem = item} />
+        <ItemList items={data?.items.sort((a,b) => a.code.localeCompare(b.code))} bind:selected={item} drag_start={drag_item} />
     </div>
     <div class="properties">
         <ItemProps {item} {properties} />

frontend/src/routes/stock/Locations.svelte

@@ -5,7 +5,13 @@
 
     import LineEditor from '../../Components/LineEditor.svelte';
 
-    let { locations, move_dragged_to = new_loc => {}, parent = null, selected = $bindable(null) } = $props();
+    let {
+        drag_start = loc => console.log({dragging:loc}),
+        locations,
+        move_dragged_to = new_loc => {},
+        parent = null,
+        selected = $bindable(null)
+    } = $props();
 
     let show_location_form = $state(false);
     let new_location_name = $state(null);
@@ -102,12 +108,14 @@
     {#each locations as location}
     <li onclick={e => toggleChildren(e, location)}
         class="{location.locations?'expanded':'collapsed'} {location.highlight?'highlight':null}"
+        draggable={true}
         ondragover={e => drag_over(e,location)}
         ondrop={e => onDrop(e,location)}
-        ondragleave={e => delete location.highlight}>
+        ondragleave={e => delete location.highlight}
+        ondragstart={e => drag_start(location)} >
         <span class="name">{location.name}</span>
         {#if location.locations}
-        <svelte:self locations={location.locations} {move_dragged_to} parent={{location:location.id}} bind:selected />
+        <svelte:self locations={location.locations} {drag_start} {move_dragged_to} parent={{location:location.id}} bind:selected />
         {/if}
     </li>
     {/each}