Draggable button

Draggable cards

Draggable Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eum distinctio fuga sapiente enim tenetur et saepe veniam eligendi! Doloribus ipsa vel eveniet rerum incidunt voluptates dolor? Non, porro modi!

Draggable Card 2

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aspernatur incidunt maxime doloribus, temporibus tempore iure reiciendis, facilis nihil atque corrupti neque! Doloribus, quod praesentium ratione accusamus sapiente omnis neque!

Nested draggables

Draggable Card

Datagrid with draggable rows

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.color}} {{users.length}} users

Draggable cards with a handle

Draggable Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eum distinctio fuga sapiente enim tenetur et saepe veniam eligendi! Doloribus ipsa vel eveniet rerum incidunt voluptates dolor? Non, porro modi!

Draggable Card 2

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aspernatur incidunt maxime doloribus, temporibus tempore iure reiciendis, facilis nihil atque corrupti neque! Doloribus, quod praesentium ratione accusamus sapiente omnis neque!

Draggable cards with a custom ghost and handle

Custom ghost and handle card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eum distinctio fuga sapiente enim tenetur et saepe veniam eligendi! Doloribus ipsa vel eveniet rerum incidunt voluptates dolor? Non, porro modi!

Custom ghost and handle card

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aspernatur incidunt maxime doloribus, temporibus tempore iure reiciendis, facilis nihil atque corrupti neque! Doloribus, quod praesentium ratione accusamus sapiente omnis neque!

Basic Droppable

Files:
Nothing to drag here...
{{file.name}}
Drop here to upload:
Nothing to upload here...
{{file.name}}
Dragging a file will show an image icon as a custom ghost.
Files:
Nothing to drag here...
{{file.name}}
Drop here to upload:
Nothing to upload here...
{{file.name}}
Drag each file by its icon.
Files:
Nothing to drag here...
{{file.name}}
Drop here to upload:
Nothing to upload here...
{{file.name}}

Drop Tolerance

A.
Files:
Nothing to drag here...
{{file.name}}
B.
Drop here to upload:
Nothing to upload here...
{{file.name}}

Grouping Draggables with Droppables

Files:
Nothing to drag here...
{{file.name}}
Drop audio files here:
Only audios will be accepted here.
{{file.name}}
Drop image files here:
Only images will be accepted here.
{{file.name}}
Drop movie files here:
Only videos will be accpeted here.
{{file.name}}