Minimal HTML5 Drag And Drop JavaScript Library – dragndrop.js

Preview:

Description:

A simple plain JavaScript library to create draggable and droppable elements by using HTML5 Drag and Drop API.

How to use it:

1. Import the dragndrop.js JavaScript library into the HTML document.

<script src="src/dragndrop.js"></script>

2. Create draggable elements.

<div class="draggable">Draggable</div>
<div class="draggable">Draggable</div>
<div class="draggable">Draggable</div>

3. Create a drop zone.

<div id="drop-zone"">
  Drop Items Here!
</div>

4. Initialize the drag and drop library. That’s it.

dragndrop.dropZone('#drop-zone');
dragndrop.draggable('.draggable');