feat: improve drag and drop (baserow#5404)

---------

Co-authored-by: Jeremie Pardou <571533+jrmi@users.noreply.github.com>

Author: jonadeline

changelog/entries/unreleased/feature/5143_improve_drag_and_drop_ux.json

@@ -0,0 +1,9 @@
+{
+    "type": "feature",
+    "message": "Improve drag and drop UX",
+    "issue_origin": "github",
+    "issue_number": 5143,
+    "domain": "builder",
+    "bullet_points": [],
+    "created_at": "2026-05-20"
+}

web-frontend/modules/builder/components/elements/ElementPreview.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="elementPreviewRef"
     :key="element.id"
     class="element-preview"
     :class="{
@@ -15,6 +16,7 @@
     }"
     :draggable="isDraggable"
     @click="onSelect"
+    @mousedown="canUpdate && isSelected && onDragHandleMouseDown($event)"
     @dragstart.stop="onDragStart"
     @dragend="onDragEnd"
     @dragenter="onDragEnter"
@@ -48,8 +50,10 @@
       @duplicate="duplicateElement"
       @select-parent="selectParentElement()"
       @drag-handle-mousedown="onDragHandleMouseDown"
+      @mousedown.stop
     />
     <PageElement
+      ref="elementRef"
       :element="element"
       :mode="mode"
       class="element--read-only"
@@ -72,7 +76,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { useStore, mapActions, mapGetters } from 'vuex'
 import ElementMenu from '@baserow/modules/builder/components/elements/ElementMenu'
 import InsertElementButton from '@baserow/modules/builder/components/elements/InsertElementButton'
@@ -113,6 +117,8 @@ export default {
   },
   emits: ['move'],
   setup(props) {
+    const elementPreviewRef = ref(null)
+    const elementRef = ref(null)
     const store = useStore()
     const builder = inject('builder')
 
@@ -129,13 +135,71 @@ export default {
         props.element.parent_element_id
       )
     })
+
+    function getDragImageScale(rect) {
+      const defaultDragImageScale = 0.5
+      const maxHeightRatioBeforeScalingDown = 0.3
+      const viewportHeight =
+        window.innerHeight || document.documentElement.clientHeight
+      const maxHeightBeforeScalingDown =
+        viewportHeight * maxHeightRatioBeforeScalingDown
+      const defaultScaledHeight = rect.height * defaultDragImageScale
+
+      if (
+        !viewportHeight ||
+        defaultScaledHeight <= maxHeightBeforeScalingDown
+      ) {
+        return defaultDragImageScale
+      }
+
+      return maxHeightBeforeScalingDown / rect.height
+    }
+
+    function createDragImage() {
+      const source = elementRef.value.$el
+      const rect = source.getBoundingClientRect()
+      const dragImageScale = getDragImageScale(rect)
+
+      const clone = source.cloneNode(true)
+
+      Object.assign(clone.style, {
+        boxSizing: 'border-box',
+        width: `${rect.width}px`,
+        minWidth: `${rect.width}px`,
+        maxWidth: `${rect.width}px`,
+        transform: `scale(${dragImageScale})`,
+        transformOrigin: 'top left',
+      })
+
+      const container = document.createElement('div')
+      Object.assign(container.style, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        pointerEvents: 'none',
+      })
+      container.appendChild(clone)
+      elementPreviewRef.value.appendChild(container)
+      requestAnimationFrame(() => {
+        // immediately remove the cloned element
+        elementPreviewRef.value.removeChild(container)
+      })
+
+      return container
+    }
+
     return {
-      ...useElementDraggable({ element: props.element }),
+      ...useElementDraggable({
+        element: props.element,
+        getDragImage: createDragImage,
+      }),
       ...useDropElementTarget({
         parentElement,
         referenceElement: props.element,
         placeInContainer: props.element.place_in_container,
       }),
+      elementPreviewRef,
+      elementRef,
       parentElement,
       elementPage,
     }

web-frontend/modules/builder/composables/useDropElementTarget.js

@@ -187,6 +187,14 @@ export function useDropElementTarget({
 
     syncDropPosition(event)
 
+    // Empty placeholders have no reference element, so dragover marks them
+    // active directly when the cursor is over their real DOM box.
+    if (!unref(referenceElement)) {
+      // force dragenter local state because native dragenter event is not always reliable.
+      dragEnterCount = Math.max(dragEnterCount, 1)
+      dndContext.dropTargetId = uid
+    }
+
     event.preventDefault()
     event.stopPropagation()
   }

web-frontend/modules/builder/composables/useElementDraggable.js

@@ -1,19 +1,19 @@
-import { ref, onUnmounted, inject } from 'vue'
+import { computed, ref, onUnmounted, inject, unref } from 'vue'
 
 /**
  * Manages the drag-source behaviour of a builder element in the page preview.
  *
  * Responsibilities:
- *  - Activate the HTML5 draggable attribute only while the drag handle is held
- *    down
+ *  - Activate the HTML5 draggable attribute only while the drag handle or the
+ *    preview source is held down
  *  - Write / clear the shared dndContext when a drag starts or ends.
  *  - Clean up the mouseup listener automatically when the component unmounts.
  *
  * @param {Function} getElement
  * @returns {{ isDraggable: Ref<boolean>, onDragHandleMouseDown: Function,
  *   onDragStart: Function, onDragEnd: Function }}
  */
-export function useElementDraggable({ element }) {
+export function useElementDraggable({ element, getDragImage = null }) {
   const dndContext = inject('dndContext')
 
   const isDraggable = ref(false)
@@ -34,6 +34,17 @@ export function useElementDraggable({ element }) {
   function onDragStart(event) {
     event.dataTransfer.effectAllowed = 'move'
     event.dataTransfer.setData('text/plain', String(unref(element).id))
+
+    if (typeof getDragImage === 'function') {
+      const dragElement = getDragImage()
+      const cloneRect = dragElement.getBoundingClientRect()
+      event.dataTransfer.setDragImage(
+        dragElement,
+        cloneRect.width / 2,
+        cloneRect.height / 2
+      )
+    }
+
     dndContext.draggedElement = unref(element)
   }
 

web-frontend/modules/core/assets/scss/components/builder/add_element_zone.scss

@@ -5,14 +5,14 @@
   width: calc(100% - 40px);
   height: 120px;
   border: 1px dashed $palette-neutral-400;
-  background-color: $palette-neutral-50;
+  background-color: rgba($palette-neutral-50, 0.5);
   margin: 20px;
 
   @include rounded($rounded-md);
 
   &:hover {
     border: 1px solid $palette-blue-500;
-    background-color: $palette-blue-50;
+    background-color: rgba($palette-blue-50, 0.8);
     border-color: $palette-blue-300;
     cursor: pointer;
   }

web-frontend/modules/core/assets/scss/components/builder/element.scss

@@ -77,6 +77,8 @@
 }
 
 .element--read-only {
+  user-select: none;
+
   & .ab-button,
   & .ab-input {
     pointer-events: none;

web-frontend/modules/core/assets/scss/components/builder/element_preview.scss

@@ -77,7 +77,7 @@
   }
 
   &.element-preview--active {
-    cursor: inherit;
+    cursor: grab;
 
     &::before {
       @include absolute(0, 0, 0, 0);

web-frontend/test/unit/builder/composables/useDropElementTarget.spec.js

@@ -0,0 +1,89 @@
+import flushPromises from 'flush-promises'
+import { defineComponent, reactive } from 'vue'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { useDropElementTarget } from '@baserow/modules/builder/composables/useDropElementTarget'
+
+describe('useDropElementTarget', () => {
+  let testApp = null
+  let store = null
+
+  const page = { id: 1, shared: false, elementMap: {} }
+  const sharedPage = { id: 2, shared: true, elementMap: {} }
+  const builder = { id: 1, pages: [page, sharedPage] }
+  const workspace = { id: 1 }
+
+  const mountDropTarget = ({ dndContext, parentElement = null }) => {
+    const DropTarget = defineComponent({
+      template: `
+        <div
+          data-test-id="drop-target"
+          @dragenter="onDragEnter"
+          @dragover="onDragOver"
+          @dragleave="onDragLeave"
+          @drop="onDrop"
+        />
+      `,
+      setup() {
+        return useDropElementTarget({
+          parentElement,
+          page,
+        })
+      },
+    })
+
+    return mountSuspended(DropTarget, {
+      global: {
+        provide: {
+          builder,
+          dndContext,
+          workspace,
+        },
+      },
+    })
+  }
+
+  beforeEach(() => {
+    testApp = useNuxtApp()
+    store = testApp.$store
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('can drop on an empty placeholder after dragover without dragenter', async () => {
+    const draggedElement = {
+      id: 10,
+      type: 'heading',
+      page_id: page.id,
+      parent_element_id: null,
+      place_in_container: null,
+    }
+    const dndContext = reactive({
+      draggedElement,
+      dropTargetId: null,
+    })
+    const dispatchSpy = vi.spyOn(store, 'dispatch').mockResolvedValue()
+
+    const wrapper = await mountDropTarget({ dndContext })
+    const target = wrapper.find('[data-test-id="drop-target"]')
+
+    await target.trigger('dragover')
+
+    expect(dndContext.dropTargetId).not.toBe(null)
+
+    await target.trigger('drop')
+    await flushPromises()
+
+    expect(dispatchSpy).toHaveBeenCalledWith('element/move', {
+      builder,
+      page,
+      elementId: draggedElement.id,
+      beforeElementId: null,
+      parentElementId: null,
+      placeInContainer: null,
+      targetPage: page,
+    })
+    expect(dndContext.dropTargetId).toBe(null)
+  })
+})