Create Draggable Elements In Pure JavaScript – Draggable

Category: Drag & Drop , Javascript | May 30, 2017
Views Total:3,216 views
Official Page:Go to website
Last Update:May 30, 2017


Create Draggable Elements In Pure JavaScript – Draggable


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

You Might Be Interested In:

Leave a Reply