Minimal HTML5 Drag And Drop JavaScript Library – dragndrop.js

Category: Drag & Drop , Javascript | March 8, 2021
Author:qrai
Views Total:157 views
Official Page:Go to website
Last Update:March 8, 2021
License:MIT

Preview:

Minimal HTML5 Drag And Drop JavaScript Library – dragndrop.js

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');

You Might Be Interested In:


Leave a Reply