Draggable HTML/SVG Elements – PlainDraggable

Preview:

Description:

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
draggable.setOptions(options)
// re-calculate the position
draggable.position()

Changelog:

05/28/2021

• v2.5.13