Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Drag and drop table content/rows with JavaScript
branch: master

This branch is 83 commits behind dbunic:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
example00
example01
example02
example03
example04
example05
example06
example07
example08
example09
example10
example11
example12
example13
example14
example15
example16
example17
example18
example19
example20
example21
example22
example23
changes.txt
header.js
index.html
readme.md
redips-drag-min.js
redips-drag.js
style.css

readme.md

REDIPS.drag 4.6.17

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="drag"> to enable content dragging
  • place <div class="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
  • "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.enable_drag() - enables / disables one or all DIV elements in tables
  • REDIPS.drag.enable_table() - enables / disables tables selected by class name
  • REDIPS.drag.clone_div() - clones DIV element and returns reference of the cloned element
  • REDIPS.drag.save_content() - scans table and prepares table content as query string or JSON object
  • REDIPS.drag.relocate() - relocates all child nodes from source table cell to the target table cell
  • REDIPS.drag.empty_cell() - removes elements from table cell
  • REDIPS.drag.move_object() - method will calculate parameters and start animation (DIV element to the destination table cell)
  • REDIPS.drag.shift_cells() - method shifts table content horizontally or vertically (REDIPS.drag.shift_option defines the way of how content will be shifted)
  • REDIPS.drag.delete_object() - method deletes DIV element (input parameter is DIV reference or element id)
  • REDIPS.drag.get_position() - returns DIV element position as array (tableIndex, rowIndex and cellIndex)
  • REDIPS.drag.row_opacity() - sets opacity to table row (el, opacity, color)
  • REDIPS.drag.row_empty() - marks selected row as empty (tbl_id, row_idx, [color])
  • REDIPS.drag.getScrollPosition() - returns scroll positions as array [ scrollX, scrollY ]
  • REDIPS.drag.get_style() - returns style value of requested object and style name
  • REDIPS.drag.find_parent() - returns a reference of the required parent element
  • REDIPS.drag.find_cell() - returns data for first or last table cell (cell reference, row index and column index)

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:

Something went wrong with that request. Please try again.