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.

Sorting

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.

Swapping

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.)

Events

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

• draginit: the elements receives the lock and it is ready for dragging.
• dragstart: first moving act registered on the dragged element.
• drag: any dragging act (including the first one).
• dragover: fires when, while dragging, the cursor enters a drop target.
• dragout: fires when, while dragging, the cursor leaves a drop target.
• drop: dropping act, fires when releasing the object on top of a target.
• dragend: fires when the dragging act ceases.

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:

• type: see list above.
• element: the physically or virtually dragged element.
• placeholder: the placeholder element showed in the current drop zone.
• floater: the physically dragged element. Add drag-floater-resize css-class to force its size to match the original element.
• data: the dragged data. May be the repeater item or the element dataset.
• currentPosition: the current cursor position.