Create Draggable Elements In Pure JavaScript – Draggable

Preview:

Description:

Yet another draggable JavaScript library which allows the mouse drag to move any DOM elements inside the boundaries (x and/or y axis) of a specified container. Without the need of any 3rd dependencies.

How to use it:

Just include the JavaScript file Draggable.js script on the webpage and the JS library is ready for use.

<script src='Draggable.js'></script>

Declare boundaries and draggable elements.

const boundXY = document.getElementById('boundXY');
const dragMe = document.getElementById('dragMe');

Pass the configuration options as an object.

const props =  {
      xAxis: true,
      yAxis: true,
      xBoundaryElement: boundXY,
      yBoundaryElement: boundXY,
      ondrop: function() { console.log(this, event); }
};

Initialize the Draggable library and done.

Draggable(dragMe, props);