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