Drag & Drop Plugin

The drag-drop plugin allows users to reorder selected items by dragging them. This is useful when the order of selections matters, such as priority lists or ranked preferences.

Usage

<select
  data-dot-select
  data-plugins="drag-drop,remove-button"
  multiple
  data-placeholder="Drag to reorder..."
>
  <option value="1" selected>First Priority</option>
  <option value="2" selected>Second Priority</option>
  <option value="3" selected>Third Priority</option>
  <option value="4">Fourth Priority</option>
  <option value="5">Fifth Priority</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select
      data-dot-select
      data-plugins="drag-drop,remove-button"
      multiple
      data-placeholder="Drag to reorder..."
    >
      <option value="1" selected>First Priority</option>
      <option value="2" selected>Second Priority</option>
      <option value="3" selected>Third Priority</option>
      <option value="4">Fourth Priority</option>
      <option value="5">Fifth Priority</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="drag-drop,remove-button"
    multiple
    data-placeholder="Drag to reorder..."
  >
    <option value="1" selected>First Priority</option>
    <option value="2" selected>Second Priority</option>
    <option value="3" selected>Third Priority</option>
    <option value="4">Fourth Priority</option>
    <option value="5">Fifth Priority</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Behavior

• Selected items display a drag handle on hover
• Click and drag an item to reorder it among the other selected items
• The underlying <select> element's option order is updated to match
• The ds:change event fires after reordering with the new order reflected in the value array

Configuration

Attribute	Description	Default
data-plugin-drag-drop-handle	Show a dedicated drag handle icon	true
data-plugin-drag-drop-animation	Enable smooth animation during drag	true

<select
  data-dot-select
  data-plugins="drag-drop"
  data-plugin-drag-drop-handle="true"
  data-plugin-drag-drop-animation="true"
  multiple
  data-placeholder="Reorder items..."
>
  <option value="a" selected>Item A</option>
  <option value="b" selected>Item B</option>
  <option value="c" selected>Item C</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select
      data-dot-select
      data-plugins="drag-drop"
      data-plugin-drag-drop-handle="true"
      data-plugin-drag-drop-animation="true"
      multiple
      data-placeholder="Reorder items..."
    >
      <option value="a" selected>Item A</option>
      <option value="b" selected>Item B</option>
      <option value="c" selected>Item C</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="drag-drop"
    data-plugin-drag-drop-handle="true"
    data-plugin-drag-drop-animation="true"
    multiple
    data-placeholder="Reorder items..."
  >
    <option value="a" selected>Item A</option>
    <option value="b" selected>Item B</option>
    <option value="c" selected>Item C</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Reading the Order

The value array reflects the current visual order:

const select = DotSelect.getInstance(document.querySelector('#priority-list'));
const orderedValues = select.getValue();
// ["2", "1", "3"] — reflects the user's drag-and-drop order

Styling

Customize the drag handle and drag state:

.dot-select .ds-item-drag-handle {
  cursor: grab;
  color: #94a3b8;
  margin-right: 4px;
}

.dot-select .ds-item.dragging {
  opacity: 0.5;
  background-color: #f1f5f9;
}

.dot-select .ds-item.drag-over {
  border-top: 2px solid #3b82f6;
}

Accessibility

• Drag and drop is supplemented with keyboard controls: use Alt + Arrow Up/Down to reorder items
• The drag handle has an aria-label of "Drag to reorder"
• Screen readers announce the item's new position after reordering

TIP

Combine drag-drop with the remove-button plugin for a complete experience where users can both reorder and remove items.