sortable-dnd

sortable-dnd

Make array elements draggable

Usage

HTML

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

JavaScript

import Sortable from 'sortable-dnd'

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

When the component you created is destroyed, you need to destroy the drag(new Draggable)like this

drag.destroy()

Options

option	type	default	Description
group	HTMLElement	-	List parent element
scroll	HTMLElement	-	List scroll element. If not passed, the default is the same as the group
draggable	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