Drag and drop table content/rows with JavaScript
JavaScript HTML CSS PHP
Permalink
Failed to load latest commit information.
example00 5.1.0 (2015-03-06) Mar 20, 2015
example01 5.1.0 (2015-03-06) Mar 20, 2015
example02 fixed example02 Apr 10, 2015
example03 added mysqli API Mar 20, 2015
example04 5.1.0 (2015-03-06) Mar 20, 2015
example05 5.1.0 (2015-03-06) Mar 20, 2015
example06 5.1.0 (2015-03-06) Mar 20, 2015
example07 5.1.0 (2015-03-06) Mar 20, 2015
example08 5.1.0 (2015-03-06) Mar 20, 2015
example09 5.1.0 (2015-03-06) Mar 20, 2015
example10 5.1.0 (2015-03-06) Mar 20, 2015
example11 Merge remote-tracking branch 'origin/master' Mar 25, 2015
example12 5.1.0 (2015-03-06) Mar 20, 2015
example13 5.1.0 (2015-03-06) Mar 20, 2015
example14 5.1.0 (2015-03-06) Mar 20, 2015
example15 5.1.0 (2015-03-06) Mar 20, 2015
example16 5.1.0 (2015-03-06) Mar 20, 2015
example17 5.1.0 (2015-03-06) Mar 20, 2015
example18 5.1.0 (2015-03-06) Mar 20, 2015
example19 5.1.0 (2015-03-06) Mar 20, 2015
example20 5.1.0 (2015-03-06) Mar 20, 2015
example21 spell corrections Apr 10, 2015
example22 5.1.0 (2015-03-06) Mar 20, 2015
example23 5.1.0 (2015-03-06) Mar 20, 2015
example24 5.1.0 (2015-03-06) Mar 20, 2015
example25 5.1.0 (2015-03-06) Mar 20, 2015
example26 5.1.0 (2015-03-06) Mar 20, 2015
example27 5.1.0 (2015-03-06) Mar 20, 2015
.gitignore added gitignore Jan 8, 2014
changes.txt Added demo link to jsFiddle examples Jan 22, 2017
header.js added example21 Simple shift Nov 27, 2012
index.html Added demo link to jsFiddle examples Jan 22, 2017
readme.md Added link to jsFiddle with examples Jan 22, 2017
redips-drag-min.js redips-nodrag prepared in redips-drag-min Mar 25, 2015
redips-drag-source.js Added demo link to jsFiddle examples Jan 22, 2017
style.css 5.1.0 (2015-03-06) Mar 20, 2015

readme.md

REDIPS.drag 5.1.0

What is REDIPS.drag?

REDIPS.drag is a JavaScript drag and drop library focused on dragging table content and table rows. Here are minimal steps to enable content dragging or row dragging in HTML table:

  • put <script type="text/javascript" src="redips-drag-min.js"></script> to the head section
  • initialize REDIPS.drag library: <body onload="REDIPS.drag.init()">
  • place table(s) inside <div id="redips-drag"> to enable content dragging
  • place <div class="redips-drag">Hello World</div> to the table cell

Features

  • dragging table content/row
  • dropping modes: multiple, single, switch, switching, overwrite and shift
  • 4 shift modes (horizontal1, horizontal2, vertical1 and vertical2)
  • multiple drop options can drop to cell top or bottom
  • using custom event handlers
  • autoscroll
  • content cloning
  • support for scrollable DIV containers
  • sticky tables and DIV containers
  • unlimit nested tables support
  • dropping rules (like allowed and forbidden table cells)
  • animation (move element/row to the destination cell/row)
  • "noautoscoll" option for drag containers
  • "redips-nolayout" option for tables (table in DIV element can be dragged as any other content)
  • takes care about rows with style display='none'
  • support for dynamical creation of table layout (inner table inside DIV element can be moved and accept other DIV elements)
  • works in touch devices (tested on Android 2.3.3)

Public methods

  • REDIPS.drag.init() - drag container initialization
  • REDIPS.drag.initTables() - tables layout initialization
  • REDIPS.drag.cloneObject() - clones DIV element and returns reference of the cloned element
  • REDIPS.drag.deleteObject() - method deletes DIV element (input parameter is DIV reference or element id)
  • REDIPS.drag.emptyCell() - test if table cell contains DIV elements or remove elements from TD
  • REDIPS.drag.enableDrag() - enables / disables one or all DIV elements in tables
  • REDIPS.drag.enableTable() - enables / disables tables selected by class name
  • REDIPS.drag.findCell() - returns data for first or last table cell (cell reference, row index and column index)
  • REDIPS.drag.findParent() - returns a reference of the required parent element
  • REDIPS.drag.getPosition() - returns DIV element position as array (tableIndex, rowIndex and cellIndex)
  • REDIPS.drag.getScrollPosition() - returns scroll positions as array [ scrollX, scrollY ]
  • REDIPS.drag.getStyle() - returns style value of requested object and style name
  • REDIPS.drag.moveObject() - method will calculate parameters and start animation (DIV element to the destination table cell)
  • REDIPS.drag.relocate() - relocates all child nodes from source table cell to the target table cell
  • REDIPS.drag.rowEmpty() - marks selected row as empty (tbl_id, row_idx, [color])
  • REDIPS.drag.rowOpacity() - sets opacity to table row (el, opacity, color)
  • REDIPS.drag.saveContent() - scans table and prepares table content as query string or JSON object
  • REDIPS.drag.shiftCells() - method shifts table content horizontally or vertically (REDIPS.drag.shift_option defines the way of how content will be shifted)

Documentation

A reference documentation with a list of public properties and methods contained in REDIPS.drag library.

Demos

Live demo shows REDIPS.drag library in action:

YouTube

Screencast of several examples contained in REDIPS.drag package: