SortableElement()

The <exmg-sortable> element Enables drag and drop sorting of nodes in a list, table or any other set of elements.

!!! You should always handle @dom-order-change to update your local .items property to update sorted list properly

<exmg-sortable item-selector="li" @dom-order-change="${this.myChangeHandler}">
 <ul>
    ${this.items.map((item) => {
      return html`
        <li>${item}</li>
      `;
    })}
 </ul>
</exmg-sortable>

new SortableElement()
exmg-sortable/exmg-sortable.js, line 23

Extends

Methods

animateNode(node, dx, dy)
exmg-sortable/exmg-sortable-base.js, line 223

Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as if nodes animate from their old to their new position in the dom.

Parameters:
Name Type Default Description
node Node
dx number 0
dy number 0
Inherited From:

createClone(node) → {Node}
exmg-sortable/exmg-sortable-base.js, line 290

Clones a given node to visually drag around. The original node is left in the same flow as its siblings. Clone styles are added onto the style object directly, since the ::slotted() selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep.

Parameters:
Name Type Description
node HTMLElement
Returns:
Node -

clone

Inherited From:

getSortableHost()
exmg-sortable/exmg-sortable-base.js, line 51

Get instance of sortable host. By default it is exmg-sortable which can be overridden by property sortableHostNode

Inherited From:

handleTrack()
exmg-sortable/exmg-sortable-base.js, line 61

Tracks a pointer from touchstart/mousedown to touchend/mouseup. Note that the start state is fired following the first actual move event following a touchstart/mousedown.

Inherited From:

hitTest(node, targets) → {Array.<HTMLElement>}
exmg-sortable/exmg-sortable-base.js, line 182

Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the given targets. Returns an array of matches.

Parameters:
Name Type Description
node HTMLElement
targets Array
Returns:
Array.<HTMLElement> -

matches

Inherited From:

insertAtTarget(node, target)
exmg-sortable/exmg-sortable-base.js, line 259

Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it; If it follows the target, it is inserted before it. This ensures any node can be dragged from the very beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because of this dom update.

Parameters:
Name Type Description
node Node
target Node
Inherited From:

isAnimating(node) → {boolean}
exmg-sortable/exmg-sortable-base.js, line 197

Returns a boolean indicating whether the node is currently in an animation.

Parameters:
Name Type Description
node HTMLElement
Returns:
boolean -

isAnimating

Inherited From:

trackEnd()
exmg-sortable/exmg-sortable-base.js, line 112

Ends the drag and drop sequence.

Inherited From:

trackMove()
exmg-sortable/exmg-sortable-base.js, line 137

Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is the insert point for updated sorting.

Inherited From:

trackStart()
exmg-sortable/exmg-sortable-base.js, line 87

Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property. If a handleSelector is defined, a node matching this selector must be clicked instead.

Inherited From: