Minimalist Drag And Drop Library – js-dragndrop

Preview:

Description:

A vanilla JavaScript drag and drop library which enables you to drag DOM elements within a boundary you specify.

How to use it:

Just insert the JavaScript file ‘dragndrop.js’ into the document and you’re ready to go.

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

Add the CSS class ‘js-dragndrop’ to any elements which should be draggable. And add the CSS class ‘js-dragndrop-limiter’ to boundary elements.

<div class="outer js-dragndrop-limiter">
  <div class="inner inner--1 js-dragndrop js-dragndrop-limiter">
      Content A
      
      <p>
          sub div
      </p>
      
      <div class="inner inner--2 js-dragndrop">
          Sub-content A
      </div>
  </div>
  <div class="inner inner--3 js-dragndrop">
      Content B
  </div>
</div>

Initialize the drag and drop library.

dragndrop.initOnDocumentReady();