Migrating from ghl-ui DraggableElement to HighRise DraggableElement

This guide will help you migrate from the ghl-ui DraggableElement component to the new HighRise DraggableElement component.

Component Implementation Changes

Import Changes

- import { UIDraggableElement } from '@gohighlevel/ghl-ui'
+ import { HLDraggableElement } from '@platform-ui/highrise'

Basic Usage Changes

- <UIDraggableElement
-    :icon="Mail04Icon"
-    :label="'mail'"
-  />
-
+ <HLDraggableElement id="draggable-default">
+   <template #content>
+     <div>Visual structure for draggable content</div>
+   </template>
+ </HLDraggableElement>

HighRise DraggableElement is a visual container only. It does not emit drag events and does not forward arbitrary DOM attributes. Wrap it with your drag-and-drop implementation (e.g., draggable + native events or a library hook) and toggle styling with the props below.

Props Changes

ghl-ui Prop	HighRise Prop	Notes
icon	slot icon	Provide a custom drag handle icon via the icon slot
label	slot content	Main content now belongs in the content slot
-	handlerPosition	'left' (default) | 'right' | 'top' | 'bottom'
-	showHandler	Toggle the built-in handle (default: true)
-	bordered	Show border and shadow (default: true)
-	isDragging	Apply dragging styles (set from your DnD state)
-	isDroppable	Apply droppable styles (set from your DnD state)
-	disabled	Apply disabled styling
-	id	Optional identifier for analytics/testing

Examples

Basic Draggable Shell

<template>
  <HLDraggableElement id="basic-draggable">
    <template #content>
      <div class="font-medium">Draggable item</div>
    </template>
  </HLDraggableElement>
</template>

With Custom Icon and Right Handle

<template>
  <HLDraggableElement id="custom-handle" handler-position="right">
    <template #icon>
      <GripHorizontalIcon />
    </template>
    <template #content>
      <div class="flex items-center gap-2">
        <span class="text-sm text-gray-700">Drag me</span>
      </div>
    </template>
  </HLDraggableElement>
</template>

<script setup>
import { GripHorizontalIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Integrating with Native Drag Events

<template>
  <div draggable @dragstart="handleDragStart" @dragend="handleDragEnd" @dragover.prevent="handleDragOver" @drop.prevent="handleDrop">
    <HLDraggableElement id="stateful-drag" :is-dragging="isDragging" :is-droppable="isDroppable" :show-handler="true">
      <template #content>
        <div class="flex items-center gap-2">
          <span>{{ item.name }}</span>
        </div>
      </template>
    </HLDraggableElement>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HLDraggableElement } from '@platform-ui/highrise'

const item = { id: 1, name: 'Drag target' }
const isDragging = ref(false)
const isDroppable = ref(false)

const handleDragStart = () => {
  isDragging.value = true
}

const handleDragEnd = () => {
  isDragging.value = false
  isDroppable.value = false
}

const handleDragOver = () => {
  isDroppable.value = true
}

const handleDrop = () => {
  isDroppable.value = false
}
</script>

Best Practices

1. Wrap HLDraggableElement in your drag-and-drop solution; the component itself does not emit drag events or forward arbitrary attributes.
2. Drive is-dragging and is-droppable from your drag state to keep visuals in sync.
3. Use the icon slot for custom handles; hide it with :show-handler="false" when the entire card should be draggable.
4. Choose handler-position that matches your layout (default is left).
5. Keep content lightweight—long text should wrap inside the content slot.
6. Provide an id only when you need deterministic hooks for QA or analytics.

Additional Notes

1. Attributes not declared as props are not forwarded to the root element; wrap the component when you need native draggable or ARIA hooks.
2. Styling (borders, shadows, hover) is controlled through the provided props and HighRise theme tokens.
3. The component is purely presentational—business logic and data transfer must be handled externally.