Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Draggable

Atomic draggable element that provides visual structure and styling for draggable content. Use this component within a drag and drop library to provide visual feedback and structure for draggable content. See our recommended drag and drop library here.

Default

Visual structure for draggable content

Vue

<template>
  <HLDraggableElement id="draggable-default">
    <template #content>
      <div>Visual structure for draggable content</div>
    </template>
  </HLDraggableElement>
</template>

<script setup lang="ts">
  import { HLDraggableElement } from '@platform-ui/highrise'
</script>

Handler Positions

The component supports different handler positions to match your drag and drop implementation needs.

Left handler

Right handler

Top handler

Bottom handler

Vue

<template>
  <HLDraggableElement id="draggable-left" handler-position="left">
    <template #content>
      <div>Left handler</div>
    </template>
  </HLDraggableElement>
</template>
<script setup lang="ts">
  import { HLDraggableElement } from '@platform-ui/highrise'
</script>

Visual States

The component provides visual feedback states that can be controlled by your drag and drop implementation.

Disabled state

Visual feedback for dragging state

Visual feedback for droppable state

Vue

<template>
  <HLDraggableElement id="draggable-dragging" :is-dragging="true">
    <template #content>
      <div>Visual feedback for dragging state</div>
    </template>
  </HLDraggableElement>
</template>
<script setup lang="ts">
  import { HLDraggableElement } from '@platform-ui/highrise'
</script>

Custom Handler Icon

↕️

Custom drag handler icon

Vue

<template>
  <HLDraggableElement id="draggable-custom-icon">
    <template #icon>
      <div class="p-2">↕️</div>
    </template>
    <template #content>
      <div>Custom drag handler icon</div>
    </template>
  </HLDraggableElement>
</template>
<script setup lang="ts">
  import { HLDraggableElement } from '@platform-ui/highrise'
</script>

Accessibility

• Label each draggable handle with aria-label / aria-labelledby so users know what will move when they grab it.
• Toggle aria-grabbed (or aria-pressed if you use a drag-mode switch) at the start/end of the drag.
• Reference drop targets via aria-controls / aria-describedby and include helper copy that explains how to complete the drop.

Imports

import { HLDraggableElement } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id	string | undefined	undefined	Unique identifier for the element
bordered	boolean	true	Whether to show border around the element
showHandler	boolean	true	Whether to show the drag handler
handlerPosition	'left' | 'right' | 'top' | 'bottom'	'left'	Position of the drag handler
disabled	boolean	false	Whether the element is disabled
isDragging	boolean	false	Whether the element is being dragged
isDroppable	boolean	false	Whether the element can be dropped

Slots

Name	Parameters	Description
icon	()	Custom icon for the drag handler
content	()	Content to be displayed in the draggable