sortable-dnd

sortable-dnd

JS Library for Drag and Drop, supports Sortable and Draggable

Usage

HTML

<div id="content"></div>

JavaScript

import Sortable from 'sortable-dnd'

var DND = new Sortable({
  group: document.getElementById('content'),
  dragging: (e) => {
    return e.target
  },
  dragEnd: (pre, cur) => {
    ...
  }
})

When the component you created is destroyed, you need to destroy the new Sortable like this

DND.destroy()

Options

option	type	default	Description
group	HTMLElement	-	List parent element
dragging	Function	(e) => e.target	Specifies the drag and drop element, which must return an HTMLElement
dragEnd	Function	(pre, cur) => {}	The callback function when the drag is completed
ghostStyle	Object	{}	The style of the mask element when dragging
ghostClass	String	''	The class of the mask element when dragging
animation	Number	300	animation delay

methods

method	Description
destroy	Destroy the component and empty its contents