Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

sortable-dnd

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sortable-dnd

JS Library for Drag and Drop, supports Sortable and Draggable


Version published
Weekly downloads
6.4K
decreased by-11.85%
Maintainers
1
Weekly downloads
 
Created

Downloads Version

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

Usage

HTML

<ul id="group">
  <li>
    <i class="drag">drag me</i>
    <p>1</p>
  </li>
  <li>
    <i class="drag">drag me</i>
    <p>2</p>
  </li>
  <li>
    <i class="drag">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 === 'I' ? true : false, // use function
    // draggable: 'i' // use tagName 
    // draggable: '.drag' // use class
    // draggable: '#drag' // use id
    dragging: (e) => {
      return e.target.parentNode
    },
    onDrag: (dragEl, event, originalEvent) => {
      // code
    },
    onMove: (from, ghostEl, event, originalEvent) => {
      // code
    },
    onDrop: (changed, /* originalEvent */event) => {
      // code
    },
    onChange: (from, to, event, originalEvent) => {
      // code
    }
  }
)

The component you created will clear all state after destroyed

Options

optiontypedefaultDescription
disabledBooleanfalseDisables the sortable if set to true
draggableString/FunctionundefinedSpecifies which items inside the element should be draggable, the function type must return a boolean
draggingFunctionundefinedSpecifies the element witch you want to drag:
(e) => return e.target
onDragFunctionundefinedThe callback function when the drag is started:
(dragEl, event, originalEvent) => {}
onMoveFunctionundefinedThe callback function when the dragged element is moving:
(from, ghostEl, event, originalEvent) => {}
onDropFunctionundefinedThe callback function when the drag is completed:
(changed, originalEvent) => {}
onChangeFunctionundefinedThe callback function when the dragged element changes position:
(from, to, event, originalEvent) => {}
ghostStyleObject{}The style of the mask element when dragging
ghostClassString''The class of the mask element when dragging
chosenClassString{}The class of the selected element when dragging
delayNumber0time in milliseconds to define when the sorting should start
delayOnTouchOnlyBooleanfalseonly delay if user is using touch
animationNumber150Animation speed moving items when sorting
ghostAnimationNumber0Ghost element animation delay before destroyed
forceFallbackBooleanfalsetrue: ignore the HTML5 DnD behaviour and force the fallback to kick in
stopPropagationBooleanfalseThe stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases

Methods

methodDescription
destroy()Manually clear all the state of the component, using this method the component will not be draggable

FAQs

Package last updated on 12 May 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts