Drag and drop table content/rows with JavaScript
JavaScript HTML CSS PHP
Switch branches/tags
Nothing to show
Clone or download
dbunic Version 5.2.4
- added REDIPS.drag.only.divClass and REDIPS.drag.mark.exceptionClass
rules
- now it's possible to allow defined DIV class name to "redips-only" or
"redips-mark" TD
- fixed bug in clearTable() method
Latest commit eb9d7cf Apr 17, 2017
Permalink
Failed to load latest commit information.
example00 Version 5.2.3 Apr 14, 2017
example01 Version 5.2.2, finished example 28 - Load table content (with AJAX) Apr 1, 2017
example02 Version 5.2.4 Apr 16, 2017
example03 Version 5.2.2, finished example 28 - Load table content (with AJAX) Apr 1, 2017
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 Version 5.2.4 Apr 16, 2017
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 Version 5.2.3 Apr 14, 2017
example14 5.1.0 (2015-03-06) Mar 20, 2015
example15 5.1.0 (2015-03-06) Mar 20, 2015
example16 Version 5.2.2, finished example 28 - Load table content (with AJAX) Apr 1, 2017
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 Version 5.2.2, finished example 28 - Load table content (with AJAX) Apr 1, 2017
example23 Version 5.2.2, finished example 28 - Load table content (with AJAX) Apr 1, 2017
example24 Version 5.2.2, finished example 28 - Load table content (with AJAX) Apr 1, 2017
example25 Version 5.2.4 Apr 16, 2017
example26 5.1.0 (2015-03-06) Mar 20, 2015
example27 added loadContent() method Mar 6, 2017
example28 Version 5.2.2, finished example 28 - Load table content (with AJAX) Apr 1, 2017
.gitignore added gitignore Jan 8, 2014
changes.txt Version 5.2.4 Apr 16, 2017
header.js added example21 Simple shift Nov 27, 2012
index.html Version 5.2.4 Apr 16, 2017
readme.md Version 5.2.4 Apr 16, 2017
redips-drag-min.js Version 5.2.4 Apr 16, 2017
redips-drag-source.js Version 5.2.4 Apr 16, 2017
style.css 5.1.0 (2015-03-06) Mar 20, 2015

readme.md

REDIPS.drag 5.2.4

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.ajaxCall() - create AJAX call and handle response in callback function
  • REDIPS.drag.clearTable() - deletes all DIV elements with "redips-drag" class name from table
  • 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.loadContent() - method loads content and inserts to the HTML table
  • 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 JSON object or query string
  • 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: