Drag and Drop

This page presents several different Drag n Drop use cases combined in one page.

The new fx-droptarget element allows easy creation of dropzones in a page, constrain dropped elements and allow move and copy operations.

The blue boxes on this page are fx-droptarget elements. Try moving them around on the page and watch the background colors being applied. If a droptarget accepts an element for drop it will get a green background. If it's not accepted it gets red - a drop on such an element has no effect.

Moving an element between sections

You may move the image on the right to the footer and back again.

DnD Portal with moveable blocks

The four squares below represent some UI blocks in a portal or dashboard layout where people are allowed to move elements to their liking.

Tasks

Updates

Favs

Misc

The DOM is only re-arranged at runtime and not persisted yet in any way - a reload would return the original order. This might get considered in future versions.

Copy elements to target

Copy elements by dragging them to the Dropzone. Remove items by dragging out again. Draggables in the Dropzone can also be re-arranged.

Copy me!

Or me!

Dropzone