Basic Draggable API Reference

Props

Prop	Type	Default	Description
positionX	Number	200	Initial X position in pixels
positionY	Number	200	Initial Y position in pixels
dragAlongWithCursor	Boolean	false	If true, component follows cursor movement automatically
placement	String	'bottom'	Placement relative to position: 'bottom', 'top', 'left', 'right'

Slots

Slot	Props	Description
main	{ startDrag: Function }	Content to be displayed inside the draggable component. Receives startDrag function to initiate dragging

Events

Event	Payload	Description
onStartDrag	-	Emitted when dragging starts
onDragging	-	Emitted continuously while dragging (throttled)
onStopDrag	-	Emitted when dragging stops
setPosition	{ positionX: Number, positionY: Number, placement: String }	Emitted with new position after drag stops

Methods

The component doesn't expose any methods via template refs. Use the startDrag function provided via the slot props to initiate dragging.

Example Usage

<template>
  <BasicDraggable
    :position-x="200"
    :position-y="200"
    :placement="'bottom'"
    :drag-along-with-cursor="false"
    @on-start-drag="handleStartDrag"
    @on-dragging="handleDragging"
    @on-stop-drag="handleStopDrag"
    @set-position="handleSetPosition"
  >
    <template #main="{ startDrag }">
      <div @mousedown="startDrag" class="draggable-content">
        <h3>Draggable Card</h3>
        <p>Click and drag me around!</p>
      </div>
    </template>
  </BasicDraggable>
</template>

<script setup>
import BasicDraggable from '@/components/BasicDraggable.vue';

const handleStartDrag = () => {
  console.log('Drag started');
};

const handleDragging = () => {
  console.log('Dragging...');
};

const handleStopDrag = () => {
  console.log('Drag stopped');
};

const handleSetPosition = (position) => {
  console.log('New position:', position);
  // Update position state if needed
};
</script>

Placement Options

The placement prop determines how the component is positioned relative to the specified coordinates:

• 'bottom': Component is centered horizontally and positioned below the point (default)
• 'top': Component is centered horizontally and positioned above the point
• 'left': Component is centered vertically and positioned to the left of the point
• 'right': Component is centered vertically and positioned to the right of the point

Styling

The component uses the following CSS classes:

• .basic-draggable-floating-component-wrapper: The main container (fixed position)
• .basic-draggable-floating-component-wrapper.left: Applied when placement is 'left'
• .basic-draggable-floating-component-wrapper.right: Applied when placement is 'right'
• .basic-draggable-floating-component-wrapper.top: Applied when placement is 'top'
• .basic-draggable-floating-component-wrapper.bottom: Applied when placement is 'bottom'

Notes

• The component automatically calculates REM to pixel conversion based on the root font size
• Boundary constraints prevent dragging outside the viewport
• The onDragging event is throttled to 16ms for performance
• Position updates are emitted via setPosition event when dragging stops