sortable-dnd

A JS Library for Drag and Drop, supports Sortable and Draggable

Usage

HTML

<ul id="group">
  <li>
    <i>drag me</i>
    <p>1</p>
  </li>
  <li>
    <i>drag me</i>
    <p>2</p>
  </li>
  <li>
    <i>drag me</i>
    <p>3</p>
  </li>
</ul>

JavaScript

import Sortable from 'sortable-dnd'

var DND = new Sortable(
  document.getElementById('group'),
  {
    chosenClass: 'chosen',
    draggable: (e) => {
      return e.target.tagName === 'I' ? true : false
    },
    // or draggable: 'i'
    dragging: (e) => {
      return e.target
    },
    dragEnd: (old, new) => {
      ...
    }
  }
)

The component you created will clear all state after destroyed

Options

option	type	default	Description
draggable	String/Function	-	Specifies which items inside the element should be draggable, the function type must return a boolean
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
chosenClass	String	{}	The class of the selected element when dragging
animation	Number	150	animation delay