loading... Pacem JS

A Demanded Behavior

Typical gesture, and expected feature, the drag and drop behavior has been abstracted into a dedicated webcomponent in Pacem JS ecosystem.
The PacemDragDropElement provides drag and drop capabilities in an attachable way:

<pacem-drag-drop id="dnd"></pacem-drag-drop>
<!-- reference the drag-drop element by including it among the attached behaviors -->
<pacem-panel behaviors="{{ [#dnd] }}"></pacem-panel>

The default behavior simply moves the element around:

Drop Targets

More common use-cases involve sorting items and moving items towards specific "containers".
The <pacem-drag-drop> component manages these scenarios as well.


By targeting the parent element and specifying the Pacem.UI.DropBehavior.InsertChild (which equals 'insert'), the sorting behavior is ready to go:

Always set the drag data mode to Pacem.UI.DragDataMode.Alias when dropBehavior is not Pacem.UI.DropBehavior.None.


By targeting other elements and specifying the Pacem.UI.DropBehavior.InsertChild, the swapping behavior is ready to go.
By setting the drag data mode to Pacem.UI.DragDataMode.Copy the drag source element "spawns" clones of itself.

Virtual Sorting and Swapping

There's a tight relation between the PacemDragDropElement and the PacemRepeaterElement: if the dragged element is in fact a repeater item, the sorting or swapping gestures reflect themselves onto the original repeater datasources! This is very convenient since most use-cases involve dynamic data, thus repeater-rendered lists!

(Please, refer to the demo on top of this page to see how/that it works.)

Drag Handle

By specifying a css query selector for the handle-selector attribute of the <pacem-drop-drop> element, the drag-start event gets constrained to be triggered by the first matching descendant of the dragged element.

(Please, refer to the demo on top of this page to see how/that it works.)


Several events are triggered along the drag-and-drop lifecycle. Types are listed here:

On draginit a custom placeholder can be instantiated and set to the event arguments. This action will prevent further assumptions about the placeholder creation.

Customizing the placeholder allows to decouple the source element from the target one (specially useful in swapping/spawning scenarios, see example above).

All these events have type Pacem.UI.PacemDragDropEvent, whose properties are: