Docs/Primitives/createDragControls

createDragControls

createDragControls returns a controller for dragControls. Call controls.start(event) from a separate handle's onPointerDown to start dragging without making that handle draggable.

import { createDragControls, motion } from 'motion-solidjs'

function Sheet() {
  const controls = createDragControls()
  return (
    <>
      <button onPointerDown={(e) => controls.start(e)}>Drag</button>
      <motion.div drag dragListener={false} dragControls={controls} />
    </>
  )
}

controls

drag-controls.tsxOpen ↗

import { motion, createDragControls } from 'motion-solidjs'

export const meta = {
  slug: 'drag-controls',
  title: 'Drag — createDragControls',
  category: 'drag',
  description: 'Start a drag from a separate handle with createDragControls.',
  tag: 'controls',
} as const

export default function DragControls() {
  const controls = createDragControls()

  return (
    <div class="flex flex-col items-center gap-3">
      <motion.div
        drag
        dragListener={false}
        dragControls={controls}
        dragConstraints={{ left: -120, right: 120, top: -60, bottom: 60 }}
        dragElastic={0.2}
        class="h-16 w-16 rounded-2xl bg-grad-amber shadow-glow"
      />
      <button
        onPointerDown={(e) => controls.start(e)}
        class="cursor-grab rounded-full bg-card border border-border px-4 py-1.5 text-xs text-fg-muted active:cursor-grabbing hover:text-fg"
      >
        Drag from here
      </button>
    </div>
  )
}

API

createDragControls() - returns a controls object
.start(event, options?) - begins drag; pass the PointerEvent from your handler
Pair with dragListener={false} on the draggable so it ignores its own pointer events