Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Drag and drop table content/rows with JavaScript

branch: master

added gitignore

latest commit 58fa80e053
Darko Bunic authored
Octocat-spinner-32 example00 - initTables method exposed as public (needed for cases when table is October 31, 2012
Octocat-spinner-32 example01 deleteCloned changed to clone.drag November 08, 2012
Octocat-spinner-32 example02 deleteCloned changed to clone.drag November 08, 2012
Octocat-spinner-32 example03 Added example03/docs directory and script.js modification. January 25, 2013
Octocat-spinner-32 example04 - event.relocated renamed to event.relocateEnd December 21, 2012
Octocat-spinner-32 example05 Example 25 December 06, 2012
Octocat-spinner-32 example06 Final - fixing code, comments and examples November 08, 2012
Octocat-spinner-32 example07 5.0.0 October 30, 2012
Octocat-spinner-32 example08 5.0.0 October 30, 2012
Octocat-spinner-32 example09 animation.shift property renamed to shift.animation December 27, 2012
Octocat-spinner-32 example10 Final - fixing code, comments and examples November 08, 2012
Octocat-spinner-32 example11 5.0.0 October 30, 2012
Octocat-spinner-32 example12 working on example25 December 23, 2012
Octocat-spinner-32 example13 Final - fixing code, comments and examples November 08, 2012
Octocat-spinner-32 example14 animation.shift property renamed to shift.animation December 27, 2012
Octocat-spinner-32 example15 Version 5.0.2 December 14, 2012
Octocat-spinner-32 example16 added example21 Simple shift November 27, 2012
Octocat-spinner-32 example17 working on example25 December 23, 2012
Octocat-spinner-32 example18 added example21 Simple shift November 27, 2012
Octocat-spinner-32 example19 Final - fixing code, comments and examples November 08, 2012
Octocat-spinner-32 example20 Version 5.0.2 December 14, 2012
Octocat-spinner-32 example21 animation.shift property renamed to shift.animation December 27, 2012
Octocat-spinner-32 example22 5.0.0 October 30, 2012
Octocat-spinner-32 example23 Final - fixing code, comments and examples November 08, 2012
Octocat-spinner-32 example24 5.0.0 October 30, 2012
Octocat-spinner-32 example25 animation.shift property renamed to shift.animation December 27, 2012
Octocat-spinner-32 example26 animation.shift property renamed to shift.animation December 27, 2012
Octocat-spinner-32 example27 Added example 27 TD content April 23, 2013
Octocat-spinner-32 .gitignore added gitignore January 08, 2014
Octocat-spinner-32 changes.txt Version 5.0.8 June 28, 2013
Octocat-spinner-32 header.js added example21 Simple shift November 27, 2012
Octocat-spinner-32 index.html Version 5.0.8 June 28, 2013
Octocat-spinner-32 readme.md Version 5.0.8 June 28, 2013
Octocat-spinner-32 redips-drag-min.js Version 5.0.8 June 28, 2013
Octocat-spinner-32 redips-drag-source.js Version 5.0.8 June 28, 2013
Octocat-spinner-32 style.css delete empty lines January 08, 2014
readme.md

REDIPS.drag 5.0.8

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.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:

Something went wrong with that request. Please try again.