Revue Draggable 🤏

Make anything draggable!

Active:

Event: {}

🎮 Quickstart

I don't use any options. Just Plug and Play fun!

🔒 X-axis

I can only be dragged horizontally (x-axis).

🔒 Y-axis

I can only be dragged vertically (y-axis).

❌ Undraggable

I don't want to be dragged until my update options is set to a non-false value. Click on me to toggle draggability.

🖲 Tracking

I track my deltas. Useful if you need to know my position!

x: 0, y: 0

✋ Handle

I can only be dragged by my handle. I use querySelector under the hood.

Drag here

🖼 Bounds

I can only be moved withing the confines of the body element.

🤸‍♀️ Scrollable content

Drag here
I have long scrollable content and a handle ✋. x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

👎 Non-draggable handle

Can't drag here
Dragging here works

🧩 Grid

I snap to a 25 x 25 grid

🧩 Grid

I snap to a 50 x 50 grid

🏈 Drag and Drop

I can detect drops from the other Drag and Drop box.

🏈 Drag and Drop

I can be dropped onto the other Drag and Drop box.

🧪 Programmatic usage

I sync my state with a dragHandler.

🧪 Programmatic usage

I have a dragStop handler to sync state.

🎨 Styling

I already have an absolute position.

📔 Default position

I have a default position of { x: 25, y: 25 }, so I'm slightly offset.

🏌️‍♀️ Offset

I have a default position based on percents { x: '-10%', y: '-10%' }, so I'm slightly offset.

🪄 Rem or Px positioning

I use rem instead of px for my transforms. I also have absolute positioning. I depend on a CSS hack to avoid double absolute positioning.

🐥 Nested

I' m in a nested component!

👨‍👨‍👧 Parent boundaries

I can only be moved within my offsetParent. Both parent padding and child margin work properly.

👨‍👨‍👧 Parent boundaries

I'm stuck in here too...