drag & drop memory in designer

packages/web/src/designer/Designer.svelte

@@ -50,6 +50,7 @@
   import { extendDatabaseInfoFromApps } from 'dbgate-tools';
   import SearchInput from '../elements/SearchInput.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
+  import DragColumnMemory from './DragColumnMemory.svelte';
 
   export let value;
   export let onChange;
@@ -951,9 +952,12 @@
     {/if}
   </div>
   {#if tables?.length > 0}
-    <div class="searchbox">
+    <div class="panel">
-      <SearchInput bind:value={columnFilter} placeholder="Filter columns" />
+      <DragColumnMemory {settings} {sourceDragColumn$} {targetDragColumn$} />
-      <CloseSearchButton bind:filter={columnFilter} />
+      <div class="searchbox">
+        <SearchInput bind:value={columnFilter} placeholder="Filter columns" />
+        <CloseSearchButton bind:filter={columnFilter} />
+      </div>
     </div>
   {/if}
 </div>
@@ -972,12 +976,16 @@
   .canvas {
     position: relative;
   }
-  .searchbox {
+  .panel {
     position: absolute;
     right: 16px;
     top: 0;
+    display: flex;
+  }
+  .searchbox {
     width: 200px;
     display: flex;
+    margin-left: 1px;
   }
 
   svg.drag-rect {

packages/web/src/designer/DragColumnMemory.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  export let sourceDragColumn$;
+  export let targetDragColumn$;
+  export let settings;
+
+  let memory;
+</script>
+
+{#if settings?.allowCreateRefByDrag}
+  <div
+    class="wrapper"
+    draggable={!!memory}
+    title={memory ? 'Drag this column to other column for creating JOIN' : 'Drag column here for creating JOIN'}
+    on:dragstart={e => {
+      if (!settings?.allowCreateRefByDrag) return;
+      if (!memory) return;
+
+      const dragData = { ...memory };
+      sourceDragColumn$.set(dragData);
+      e.dataTransfer.setData('designer_column_drag_data', JSON.stringify(dragData));
+    }}
+    on:dragend={e => {
+      sourceDragColumn$.set(null);
+      targetDragColumn$.set(null);
+    }}
+    on:dragover={e => {
+      if ($sourceDragColumn$) {
+        e.preventDefault();
+      }
+    }}
+    on:drop={e => {
+      var data = e.dataTransfer.getData('designer_column_drag_data');
+      e.preventDefault();
+      if (!data) return;
+      memory = $sourceDragColumn$;
+      sourceDragColumn$.set(null);
+      targetDragColumn$.set(null);
+    }}
+  >
+    {#if memory}
+      {memory.columnName}
+    {:else}
+      Drag & drop column here
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .wrapper {
+    border: 1px solid var(--theme-border);
+    padding: 3px;
+    color: var(--theme-font-2);
+  }
+</style>