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

sortable-dnd

Package Overview
Dependencies
Maintainers
1
Versions
74
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sortable-dnd

JS library for drag-and-drop lists, supports sortable and draggable

  • 0.4.1
  • Source
  • npm
  • Socket score

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

Downloads Version

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

Demo

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
    // draggable: (e) => e.target.parentNode // use fundtion to set drag Element
    onDrag: ({ from, event, originalEvent }) => {
      // code
    },
    onMove: ({ from, ghostEl, event, originalEvent }) => {
      // code
    },
    onDrop: ({ from, to, changed, event, originalEvent }) => {
      // code
    },
    onAdd: ({ from, to, event, originalEvent }) => {
      // code
    },
    onRemove: ({ from, to, event, originalEvent }) => {
      // code
    },
    onChange: ({ from, to, event, originalEvent }) => {
      // code
    },
    onSelect: ({ group, target, event, originalEvent }) => {
      // code
    },
    onDeselect: ({ group, target, event, originalEvent }) => {
      // code
    }
  }
)

Methods

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

Options

Common used

OptionTypeDefaultDescription
draggableString/Function-Specifies which items inside the element should be draggable
groupString/Object-string: 'name' or object: { name: 'group', put: true/false, pull: true/false }
multipleBooleanfalseEnable multiple drag
animationNumber150Animation speed moving items when sorting
onDragFunction-The callback function when the drag is started
onMoveFunction-The callback function when the dragged element is moving
onDropFunction-The callback function when the drag is completed
onAddFunction-The callback function when element is dropped into the list from another list
onRemoveFunction-The callback function when element is removed from the list into another list
onChangeFunction-The callback function when the dragged element changes position in the list
onSelectFunction-The callback function when element is selected
onDeselectFunction-The callback function when element is unselected

Others

OptionTypeDefaultDescription
disabledBooleanfalseDisables the sortable if set to true
chosenClassString''The class of the selected element when dragging
selectedClassString''Class name for selected item
ghostStyleObject{}The style of the mask element when dragging
ghostClassString''The class of the mask element when dragging
autoScrollBooleantrueAutomatic scrolling when moving to the edge of the container, for browsers that do not support HTML5 drag events
scrollStepNumber5The distance to scroll each frame when autoscrolling
scrollThresholdNumber15Threshold to trigger autoscroll
delayNumber0time in milliseconds to define when the sorting should start
delayOnTouchOnlyBooleanfalseonly delay if user is using touch
fallbackOnBodyBooleanfalseAppends the cloned DOM Element into the Document's Body
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

LICENSE

MIT

Keywords

FAQs

Package last updated on 25 Aug 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc