What's 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: