Draggable HTML/SVG Elements – PlainDraggable

Category: Drag & Drop , Javascript | May 28, 2021
Views Total:2,335 views
Official Page:Go to website
Last Update:May 28, 2021


Draggable HTML/SVG Elements – PlainDraggable


PlainDraggable is a simple, performant drag and drop library which enables draggable functionality on any HTML and SVG elements with snapping and boundary support.

How to use it:

Link to the minified version of the PlainDraggable library.

<script src="plain-draggable.min.js"></script>

To make an element draggable inside its parent container:

draggable = new PlainDraggable(yourElement);

Config the draggable library by passing the options object as the second parameter to the PlainDraggable method.

draggable = new PlainDraggable(yourElement,{
  // parent container 
  containment: '',
  // enable the snap functionality
  snap: undefined,
  // drag handle element
  handle: '',
  // CSS z-index property
  zIndex: 9000,
  // distance between element and left
  left: undefined,
  // distance between element and top
  top: undefined

Event handlers.

draggable = new PlainDraggable(yourElement,{
  onDrag: undefined,
  onMove: undefined,
  onMoveStart: undefined,
  onDragEnd: undefined,

API methods:

// set options
// re-calculate the position



  • v2.5.13

You Might Be Interested In:

Leave a Reply