Organizational Chart Drag & Drop Demo

This demo uses jQuery UI draggable & droppable interaction widgets to edit chart layout.

It supports dragging items within chart hierarchy and between charts.

It allows to drop item into free space in order to make dragged item a new root.

Chart provides visual feedback on drag over event with highlight item

Chart ignores attempts to loop hierarchy via dropping parent to its children.

In order to keep item full size, pin it with check box.

Drag & Drop on Touch devices

This demo uses Touch Punch work around to make jQuery UI draggable and droppable widgets work on touch devices. It was slightly modified to make drag start and click possible.


Basic Primitives

Basic Primitives is a 100 JavaScript component library for building general purpose diagrams without manual nodes layout.

  • Increase font size
  • Default font size
  • Decrease font size