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>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
icon	icon	pass icon as icon slot
label	default	pass the default slot content
id	id	Required for accessibility

Examples

Basic Draggable Element

<template>
  <HLDraggableElement
    id="basic-draggable"
    :draggable="true"
    :data="itemData"
    @drag-start="handleDragStart"
    @drag-end="handleDragEnd"
    @drag="handleDrag"
  >
    <div class="draggable-content">
      {{ itemData.name }}
    </div>
  </HLDraggableElement>
</template>

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

const itemData = ref({
  id: 1,
  name: 'Draggable Item',
})

const handleDragStart = evt => {
  console.log('Drag started:', evt)
}

const handleDragEnd = evt => {
  console.log('Drag ended:', evt)
}

const handleDrag = evt => {
  console.log('Dragging:', evt)
}
</script>

Draggable Element with Handle

<template>
  <HLDraggableElement
    id="handle-draggable"
    :draggable="true"
    :data="itemData"
    drag-handle=".drag-handle"
    @drag-start="handleDragStart"
    @drag-end="handleDragEnd"
    @drag="handleDrag"
  >
    <div class="draggable-content">
      <div class="drag-handle">⋮⋮</div>
      <div class="item-content">
        {{ itemData.name }}
      </div>
    </div>
  </HLDraggableElement>
</template>

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

const itemData = ref({
  id: 1,
  name: 'Draggable Item with Handle',
})

const handleDragStart = evt => {
  console.log('Drag started:', evt)
}

const handleDragEnd = evt => {
  console.log('Drag ended:', evt)
}

const handleDrag = evt => {
  console.log('Dragging:', evt)
}
</script>

<style scoped>
.draggable-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drag-handle {
  cursor: move;
  padding: 4px;
  color: #666;
}

.item-content {
  flex: 1;
}
</style>

Disabled Draggable Element

<template>
  <HLDraggableElement
    id="disabled-draggable"
    :disabled="true"
    :data="itemData"
    @drag-start="handleDragStart"
    @drag-end="handleDragEnd"
    @drag="handleDrag"
  >
    <div class="draggable-content">
      {{ itemData.name }}
    </div>
  </HLDraggableElement>
</template>

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

const itemData = ref({
  id: 1,
  name: 'Disabled Draggable Item',
})

const handleDragStart = evt => {
  console.log('Drag started:', evt)
}

const handleDragEnd = evt => {
  console.log('Drag ended:', evt)
}

const handleDrag = evt => {
  console.log('Dragging:', evt)
}
</script>

Best Practices

1. Always provide a unique id for accessibility
2. Use appropriate drag handles for better UX
3. Implement proper drag event handlers
4. Set appropriate data attributes
5. Use meaningful content structure
6. Add proper ARIA labels
7. Handle disabled states appropriately
8. Use descriptive item names
9. Implement proper error handling
10. Consider using tooltips for additional information
11. Handle disabled states properly
12. Use consistent spacing and alignment
13. Consider drag handle placement
14. Handle drag events properly
15. Consider keyboard navigation
16. Implement proper error messages

Additional Notes

1. The component automatically handles focus states
2. Drag states are managed through events
3. Supports keyboard navigation
4. Maintains consistent styling with other components
5. Handles disabled states consistently
6. Integrates seamlessly with other draggable components
7. Maintains accessibility standards
8. Supports custom styling through CSS variables
9. Provides clear visual feedback for all states
10. Works well on both desktop and mobile devices
11. Supports both controlled and uncontrolled modes
12. Includes built-in drag handle support
13. Supports custom event handling
14. Handles touch events
15. Supports custom data attributes
16. Provides clear drag feedback
17. Supports keyboard input
18. Handles drag and drop operations