Vsort
Sortable lists library which support all virtual dom libraries like React, Angular, Vue and others.
It simply tells you the new position of the element.
Work with touch events too ;)
Support last chrome, safari, opera, firefox, ie.
How to install?
npm i vsort
Example:
const config = {
rootNode: document.querySelector('ul'),
}
const vsort = createSortable(config)
vsort.subscribe((memo) => {
const { isNewPosition, draggablePosition, droppablePosition } = memo
if (!isNewPosition) return null
console.log(
isNewPosition,
draggablePosition,
droppablePosition
)
})
More:
Vsort [Stream]
createSortable [Function]
arguments:
- config [object]
return:
- Vsort instance
vsort.subscribe(subscribeCallback [Function])
call:
- subscribeCallback on every event change
subscribeCallback(memo [object])
arguments:
- memo [Object]
vsort.unsubscribe [Function]
unsubscribes from sort events
Config [Object]
name [String]
default: 'root'
Name of root group
rootNode [HTMLElement]
default: null
Node of root group
depends [Array]
default: []
Array of dependent groups.
Example:
[{ name: 'example', node: HTMLElement }]
align [String]
default: 'vertical'
possible values: 'vertical' | 'horizontal'
Sorting direction
dragStartDistance [Number]
default: 10
The distance in pixels after which the drag will begin
isDraggableNode [Function]
default:
domNode => domNode.tagName == 'LI'
Detect draggable node
isHandlerNode [Function]
default:
domNode => domNode.tagName == 'LI'
Detect handler node
isDroppableNode [Function]
default:
(domNode, rootNode) => (
domNode &&
domNode.parentNode &&
domNode.parentNode.isSameNode(rootNode)
)
Detect droppable node
isEmptyNode [Function]
default:
domNode => domNode.dataset.vsortEmpty == 'true'
Detect an empty node that says that the list is empty
ghostClassName [String]
default: 'vsort__ghost'
Name of ghost node css class
draggableClassName [String]
default: 'vsort__draggable'
Name of draggable node css class
cloneRootNode [Boolean]
default: false
Is necessary to clone the parent at creation of ghost node?
scrollNode [HTMLElement]
default: null
Enables scrolling when the cursor moves beyond the bounds of this node when the ghost node moves
scrollFill [Number]
default: 50
possible values: 0 - 100
The size of the border frame as a percentage of free space, when scrolling on it, scrolling occurs.
scrollSpeed [Number]
default: 5
Scroll speed
staticReducers [Array]
default: []
Array of functions that update memo once after create vsort instance
dynamicReducers [Array]
default: []
Array of functions that update memo on every event change
storageWrapperNode [HTMLElement]
default: document.body
Parent node for store ghostNode and draggableNode
Memo [Object]
config [object]
Configuration object
draggableNode [HTMLElement]
Draggable node
draggablePosition [Number]
Draggable position
draggableShift [Object]
Shift from element position to cursor position
dragStart [Boolean]
The status of the start of the drag, is triggered after the config.dragDistance is traversed
dragType [String]
Drag status, can be:
- DRAG_START
- DRAG_MOVE
- DRAG_STOP
droppableAlign [String]
Position memo.ghostNode relative to the memo.droppableNode
droppableGroup [Object]
example:
{
name: 'example',
node: anotherUlDomNode,
}
droppableNode [HTMLElement]
The node above which the memo.ghostNode is located
droppablePosition [Number]
Position of memo.droppableNode on the whole list
droppableTargetNode [HTMLElement]
Node under cursor
droppableTargetParentNodes [Array]
Nodes from memo.droppableTargetNode to node where config.isDroppableNode is true.
ghostCoords [Object]
Ghost coords with cursor shift
ghostNode [HTMLElement]
Ghost node
ghostRootNode [HTMLElement]
Cloned config.rootNode
handlerNode [HTMLElement]
Handler node
isDroppableNew [Boolean]
Is droppable new flag
isNeedScroll [Boolean]
Is need scroll flag
isNewPosition [Boolean]
Is new position flag
rootGroup [Object]
Root group
Example:
[{ name: 'example', node: HTMLElement }]
The name is taken from config.name
The node is taken from config.rootNode
scrollActions [Array]
Scroll actions
Example:
[
{ direction: 'top', intervalId: 10 }
]
scrollDirections [Array]
possible values: 'top', 'left', 'right', 'bottom'
Scroll directions
universalEvent [Object]
Current normalized event
startUniversalEvent [Object]
Normalized event from event.(mousedown|touchstart)
groups [Array]
Example:
[
{ name: 'users', node: usersDomNode }
]
storageDraggableNode [HTMLElement]
Node where stored draggable node
storageGhostNode [HTMLElement]
Node where stored draggable node
storageNode [HTMLElement]
Stored node
Also previous versions for:
prevDragStart, prevDroppableAlign, prevDroppableNode prevRootGroup, prevScrollDirections
Config [Object]
name [String]
default: 'root'
Name of root group
rootNode [HTMLElement]
default: null
Node of root group
depends [Array]
default: []
Array of dependent groups.
Example:
[{ name: 'example', node: HTMLElement }]
align [String]
default: 'vertical'
possible values: 'vertical' | 'horizontal'
Sorting direction
dragStartDistance [Number]
default: 10
The distance in pixels after which the drag will begin
isDraggableNode [Function]
default:
domNode => domNode.tagName == 'LI'
Detect draggable node
isHandlerNode [Function]
default:
domNode => domNode.tagName == 'LI'
Detect handler node
isDroppableNode [Function]
default:
(domNode, rootNode) => (
domNode &&
domNode.parentNode &&
domNode.parentNode.isSameNode(rootNode)
)
Detect droppable node
isEmptyNode [Function]
default:
domNode => domNode.dataset.vsortEmpty == 'true'
Detect an empty node that says that the list is empty
ghostClassName [String]
default: 'vsort__ghost'
Name of ghost node css class
draggableClassName [String]
default: 'vsort__draggable'
Name of draggable node css class
cloneRootNode [Boolean]
default: false
Is necessary to clone the parent at creation of ghost node?
scrollNode [HTMLElement]
default: null
Enables scrolling when the cursor moves beyond the bounds of this node when the ghost node moves
scrollFill [Number]
default: 50
possible values: 0 - 100
The size of the border frame as a percentage of free space, when scrolling on it, scrolling occurs.
scrollSpeed [Number]
default: 5
Scroll speed
staticReducers [Array]
default: []
Array of functions that update memo once after create vsort instance
dynamicReducers [Array]
default: []
Array of functions that update memo on every event change
storageWrapperNode [HTMLElement]
default: document.body
Parent node for store ghostNode and draggableNode