Skip to content

Latest commit

 

History

History
76 lines (60 loc) · 4.25 KB

readme.md

File metadata and controls

76 lines (60 loc) · 4.25 KB
Raw

REDIPS.drag 5.1.0

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: