vsort v1.0.6

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.

Demo here

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:

Horizontal

Vertical

Multiple

Scroll

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