drag & drop into/from connection folder

packages/web/src/appobj/AppObjectGroup.svelte

@@ -15,6 +15,7 @@
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
   export let passProps;
+  export let onDropOnGroup = undefined;
 
   let isExpanded = true;
 
@@ -36,7 +37,17 @@
   }
 </script>
 
-<div class="group" on:click={() => (isExpanded = !isExpanded)}>
+<div
+  class="group"
+  on:click={() => (isExpanded = !isExpanded)}
+  on:drop={e => {
+    var data = e.dataTransfer.getData('app_object_drag_data');
+    if (data && onDropOnGroup) {
+      e.stopPropagation();
+      onDropOnGroup(data, group);
+    }
+  }}
+>
   <span class="expand-icon">
     <FontIcon icon={groupIconFunc(isExpanded)} />
   </span>

packages/web/src/appobj/AppObjectList.svelte

@@ -21,6 +21,7 @@
 
   export let groupIconFunc = plusExpandIcon;
   export let groupFunc = undefined;
+  export let onDropOnGroup = undefined;
 
   $: filtered = !groupFunc
     ? list.filter(data => {
@@ -83,6 +84,7 @@
       {passProps}
       {getIsExpanded}
       {setIsExpanded}
+      {onDropOnGroup}
     />
   {/each}
 {:else}