sortable-dnd-lock-axis-fork v0.6.0

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

Options

Common used

Others