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
draggable.setOptions(options)

// re-calculate the position
draggable.position()

Changelog:

12/17/2025

• v2.5.15

The post Draggable HTML/SVG Elements – PlainDraggable appeared first on CSS Script.