Draggable HTML/SVG Elements – PlainDraggable

Category: Drag & Drop , Javascript | December 5, 2017
Author: anseki
Views Total: 223
Official Page: Go to website
Last Update: December 5, 2017
License: MIT


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

Leave a Reply