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

Live Demo

Usage

HTML

<ul id="group">
  <li class="item">
    <i id="handle" class="handle">drag me</i>
    <p>1</p>
  </li>
  <li class="item">
    <i id="handle" class="handle">drag me</i>
    <p>2</p>
  </li>
  <li class="item">
    <i id="handle" class="handle">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) => e.target.tagName === 'LI' ? true : false, // use function
    // draggable: 'li' // use tagName 
    // draggable: '.item' // use class
    // draggable: '#item' // use id
    // draggable: (e) => e.target // use function to set drag Element
    handle: (e) => e.target.tagName === 'I' ? true : false, // use function
    // handle: 'I', // use tagName
    // handle: '.handle', // use class
    // handle: '#handle', // use id
    onDrag: ({ from, event }) => {
      // code
    },
    onMove: ({ from, event }) => {
      // code
    },
    onDrop: ({ from, to, changed, event }) => {
      // code
    },
    onAdd: ({ from, to, event }) => {
      // code
    },
    onRemove: ({ from, to, event }) => {
      // code
    },
    onChange: ({ from, to, event }) => {
      // code
    },
    onSelect: (params) => {
      // code
    },
    onDeselect: (params) => {
      // code
    }
  }
)

Methods

| Method | Description | |--------------|--------------| | destroy() | Manually clear all the state of the component, using this method the component will not be draggable | | option(key, value?) | Get or set the option value, depending on whether the value is passed in |

Options

Common used

| Option | Type | Default | Description | |-------------------|-------------------|-------------|--------------| | draggable | String/Function | - | Specifies which items inside the element should be draggable | | handle | String/Funnction| - | Drag handle selector within list items | | group | String/Object | - | string: 'name' or object: { name: 'group', put: true/false, pull: true/false } | | multiple | Boolean | false | Enable multiple drag | | animation | Number | 150 | Animation speed moving items when sorting | | onDrag | Function | - | The callback function when the drag is started | | onMove | Function | - | The callback function when the dragged element is moving | | onDrop | Function | - | The callback function when the drag is completed | | onAdd | Function | - | The callback function when element is dropped into the list from another list | | onRemove | Function | - | The callback function when element is removed from the list into another list | | onChange | Function | - | The callback function when the dragged element changes position in the list | | onSelect | Function | - | The callback function when element is selected | | onDeselect | Function | - | The callback function when element is unselected |

Others

| Option | Type | Default | Description | |-------------------|-------------------|-------------|--------------| | disabled | Boolean | false | Disables the sortable if set to true | | chosenClass | String | '' | Class name for the dragging item | | selectedClass | String | '' | The class of the element when it is selected, it is usually used when multiple drag | | ghostStyle | Object | {} | The style of the mask element when dragging | | ghostClass | String | '' | The class of the mask element when dragging | | autoScroll | Boolean | true | Automatic scrolling when moving to the edge of the container | | scrollThreshold | Number | 55 | Threshold to trigger autoscroll | | delay | Number | 0 | Time in milliseconds to define when the sorting should start | | delayOnTouchOnly| Boolean | false | Only delay if user is using touch | | fallbackOnBody | Boolean | false | Appends the cloned DOM Element into the Document's Body | | stopPropagation | Boolean | false | The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases | | swapOnDrop | Boolean | true | When the value is false, the dragged element will return to the starting position of the drag |