Drag To Arrange Elements In A Container – sortable-dnd

Preview:

Description:

sortable-dnd is a drag’n’drop library that allows you to easily build custom draggable & sortable interfaces without sacrificing your Javascript code quality or behavior maintainability.

You can create any type of draggable, droppable, and sortable elements like lists, grids, cards, divs, etc.

How to use it:

1. Install and import the sortable-dnd.

import Sortable from 'sortable-dnd'

// OR
<script type="module">
  import Sortable from './src/index.js';
</script>

// OR
<script src="dist/sortable.min.js"></script>

2. Initialize the Sortable on the target container whose child elements should be draggable & sortable.

<div id="container"></div>

var DND = new Sortable(
    document.getElementById('container'),
    {
      // options & callbacks here
    }
)

3. Apply additional styles to the ‘ghost’ box when an element is being dragged.

var DND = new Sortable(
    document.getElementById('container'),
    {
      ghostStyle: {
        // CSS styles here,
      },
      // or apply your own CSS class
      ghostClass: '.myClass'
    }
)

4. Apply additional styles to the selected element while dragging.

var DND = new Sortable(
    document.getElementById('container'),
    {
      chosenClass: '.myCssClass'
    }
)

5. Set the animation delay in ms. Defaults to 200.

var DND = new Sortable(
    document.getElementById('container'),
    {
      animation: 500
    }
)

6. Callback functions.

var DND = new Sortable(
    document.getElementById('container'),
    {
      draggable: (e) => {
        return true
      }, // or draggable: '.class'
      dragging: (e) => {
        return e.target
      },
      dragEnd: (pre, cur) => {
        ...
      }
    }
)

7. Destroy the instance.

DND.destroy()