REDIPS.drag documentation

Drag and Drop Video Download / Preview GitHub

Namespace Summary
Constructor Attributes	Constructor Name and Description
	REDIPS.drag Version 4.6.16. REDIPS.drag is a JavaScript drag and drop library focused on dragging table content and table rows. See: REDIPS.drag documentation - Appendix A Drag and drop table content plus animation Drag and drop table rows Drag and Drop table content JavaScript drag and drop plus content shift

Field Summary
Field Attributes	Field Name and Description
	animation_pause Animation pause (lower values means the animation will go faster).
	animation_shift Shift drop option animation.
	animation_step Animation step (minimum is 1).
	autoscroll Enable / disable autoscroll option.
	border Border style for enabled element.
	border_disabled Border style for disabled element.
	bound Bound size for triggering page autoscroll or autoscroll of scrollable DIV container.
	clone_shiftKey If set to "true", all DIV elements on tables could be cloned with pressed SHIFT key.
	clone_shiftKey_row If set to "true", table rows could be cloned with pressed SHIFT key.
	current_cell Reference to current table cell.
	delete_cloned Delete cloned DIV element if dropped outside of any table.
	delete_shifted Delete shifted elements (the most right or the most left elements).
	drop_option Property defines working types of REDIPS.drag library: multiple, single, switch, switching, overwrite and shift.
	hover Hover object contains 4 properties: color_td, color_tr, border_td and border_tr.
	mark Table cells marked with "mark" class name can be allowed or forbidden for accessing (with exceptions) - default is "deny".
	mode Dragging mode "cell" or "row" (readonly).
	multiple_drop Property defines "top" or "bottom" position of dropped element in table cell (if cell already contains DIV elements).
	obj Currently moved DIV element.
	obj_old Previously moved DIV element (before clicked or cloned).
	only Table cells marked with "only" class name can accept only defined DIV elements.
	opacity_disabled Opacity level for disabled elements.
	previous_cell Reference to previous table cell.
	row_empty_color Color of empty row.
	save_pname Save content parameter name.
	shift_after Shift elements to empty cell after DIV element is deleted (moved to the trash cell).
	shift_option Property defines shift modes: horizontal1, horizontal2, vertical1 and vertical2.
	source_cell Reference to source table cell.
	speed Autoscroll pause in milliseconds.
	table_sort Table sort is feature where tables inside drop container are sorted on each element click.
	target_cell Reference to target table cell.
	trash_ask Confirm element deletion.
	trash_ask_row Confirm row deletion.
	trash_cname Table cell class name where DIV elements will be deleted.

Method Summary
Method Attributes	Method Name and Description
	clone_div(div, drag) Method clones DIV element and returns reference of the cloned element.
	delete_object(el) Method deletes DIV element from table.
	empty_cell(td) Method removes elements from table cell.
	enable_drag(enable_flag, el, type) Method attaches / detaches onmousedown, ontouchstart and ondblclick events to DIV elements and attaches onscroll event to the scrollable containers in initialization phase.
	enable_table(enable_flag, el) This method can select tables by class name and mark them as enabled / disabled.
	find_cell(param, el) Method returns data (cell reference, row index and column index) for first or last cell in table or row / column.
	find_parent(tag_name, el, skip) Method returns a reference of the required parent element.
	get_position(ip) Method returns position as array with members tableIndex, rowIndex and cellIndex (array length is 3).
	get_style(el, style_name) Method returns style value for requested HTML element and style name.
	getScrollPosition() Method returns current page scroll position as array.
	init(dc) Drag container initialization.
	move_object(ip) Method will calculate parameters and start animation (DIV element to the destination table cell).
	relocate(from, to, mode) Method relocates DIV elements from source table cell to the target table cell (with optional animation).
	row_empty(tbl_id, row_idx, color) Method marks selected row as empty.
	row_opacity(el, opacity, color) Method sets opacity to table row or deletes row content.
	save_content(tbl, type) Method scans table content and prepares query string or JSON format for submitting to the server.
	shift_cells(td1, td2) Method shifts table content horizontally or vertically.

Event Summary
Event Attributes	Event Name and Description
	myhandler_changed(current_cell) Event handler invoked on every change of current (highlighted) table cell.
	myhandler_clicked(current_cell) Event handler invoked if a mouse button is pressed down while the mouse pointer is over DIV element.
	myhandler_cloned() Event handler invoked if DIV element is cloned.
	myhandler_cloned_dropped(target_cell) Event handler invoked after cloned DIV element is dropped.
	myhandler_clonedend1() Event handler invoked if last element is cloned (type 1).
	myhandler_clonedend2() Event handler invoked if last element is cloned (type 2).
	myhandler_dblclicked() Event handler invoked if a mouse button is clicked twice while the mouse pointer is over DIV element.
	myhandler_deleted(cloned) Event handler invoked if element is deleted (dropped to the "trash" table cell).
	myhandler_dropped(target_cell) Event handler invoked if element is dropped to the table cell.
	myhandler_dropped_before(target_cell) Event handler invoked if mouse button is released but before element is dropped to the table cell.
	myhandler_moved() Event handler invoked if element is moved from home position.
	myhandler_notcloned() Event handler invoked if cloned element is dropped on start position or cloned element is dropped outside current table with "delete_cloned" property set to true.
	myhandler_notmoved() Event handler invoked if a mouse button is pressed down and released while the mouse pointer is over DIV element (element was not actually moved).
	myhandler_row_changed(current_cell) Event handler invoked on every change of current (highlighted) table row.
	myhandler_row_clicked(current_cell) Event handler invoked if a mouse button is pressed down while the mouse pointer is over row handler (div class="drag row").
	myhandler_row_cloned() Event handler invoked if table row is cloned.
	myhandler_row_deleted() Event handler invoked if row is deleted (dropped to the "trash" table cell).
	myhandler_row_dropped(target_cell) Event handler invoked after row is dropped to the table cell.
	myhandler_row_dropped_before() Event handler invoked if mouse button is released but before row is dropped to the table.
	myhandler_row_dropped_source(target_cell) Event handler invoked if row is moved around and dropped to the home position.
	myhandler_row_moved() Event handler invoked if row is moved from home position.
	myhandler_row_notcloned() Event handler invoked if cloned row is dropped to the source row.
	myhandler_row_notmoved() Event handler invoked if a mouse button is pressed down and released while the mouse pointer is over row handler (row was not actually moved).
	myhandler_row_undeleted() Event handler invoked if row is undeleted.
	myhandler_switched(target_cell) Event handler invoked if DIV elements are switched (drop_option is set to "switch").
	myhandler_undeleted() Event handler invoked if element is undeleted.

Field Detail

{Integer} animation_pause

Animation pause (lower values means the animation will go faster).

Default Value:: 20 (milliseconds)

{Boolean} animation_shift

Shift drop option animation. If set to true, table content will be relocated with animation in case of "shift" drop option.

Default Value:: false

{Integer} animation_step

Animation step (minimum is 1). Property defines number of pixels in each step. Higher values means bigger step (faster animation) but with less smoothness.

Default Value:: 2 px

{Boolean} autoscroll

Enable / disable autoscroll option. By default autoscroll is enabled but it can be usefull in some cases to completely turn off autoscroll (if application doesn't need autoscrolling page nor autoscrolling DIV container). Turning off autoscroll will speed up application because extra calculations will be skipped.

Default Value:: true

{String} border

Border style for enabled element.

Default Value:: solid

{String} border_disabled

Border style for disabled element.

Default Value:: dotted

{Integer} bound

Bound size for triggering page autoscroll or autoscroll of scrollable DIV container.

Default Value:: 25 (px)

{Boolean} clone_shiftKey

If set to "true", all DIV elements on tables could be cloned with pressed SHIFT key. Just press SHIFT key and try to drag element. Instead of moving current element, DIV element will be cloned and ready for dragging.

Default Value:: false

{Boolean} clone_shiftKey_row

If set to "true", table rows could be cloned with pressed SHIFT key. Just press SHIFT key and start dragging table row. Source row will not be deleted.

Default Value:: false

{HTMLElement} current_cell

Reference to current table cell.

See:: source_cell
previous_cell
target_cell

{Boolean} delete_cloned

Delete cloned DIV element if dropped outside of any table. If property is set to "false" then cloned DIV element will be dropped to the last possible table cell.

Default Value:: true

{Boolean} delete_shifted

Delete shifted elements (the most right or the most left elements).

Default Value:: false

{String} drop_option

Property defines working types of REDIPS.drag library: multiple, single, switch, switching, overwrite and shift.

// elements can be dropped to all table cells (multiple elements in table cell)
REDIPS.drag.drop_option = 'multiple';

// elements can be dropped only to the empty table cells
REDIPS.drag.drop_option = 'single';

// switch content
REDIPS.drag.drop_option = 'switch';

// switching content continuously
REDIPS.drag.drop_option = 'switching';

// overwrite content in table cell
REDIPS.drag.drop_option = 'overwrite';

// shift table content after element is dropped or moved to trash cell
REDIPS.drag.drop_option = 'shift';

Default Value:: multiple

{Object} hover

Hover object contains 4 properties: color_td, color_tr, border_td and border_tr. color_td and color_tr defines hover color for DIV element and table row. If border_td is defined, then highlighted cell will have border. If border_tr is defined then highlighted row will have only top or bottom border. Top border shows that row will be placed above current row, while bottom border shows that current row will be placed below current row. Some browsers may have problem with "border-collapse:collapse" table style and border highlighting. In that case try without collapsing TD borders (e.g set "border-spacing:0" and smaller "td.border-width").

// set "#9BB3DA" as hover color for TD
REDIPS.drag.hover.color_td = '#9BB3DA';

// or set "Lime" as hover color for TR
REDIPS.drag.hover.color_tr = 'Lime';

// set red border for highlighted TD
REDIPS.drag.hover.border_td = '2px solid red';

{Object} mark

Table cells marked with "mark" class name can be allowed or forbidden for accessing (with exceptions) - default is "deny". This is useful to define table cells forbidden for every DIV element with exceptions (or contrary, define table cells allowed for all DIV elements except some). Object contains:

{String} action - allow / deny table cell (default is "deny")
{String} cname - class name of marked cells (default is "mark")
{Array} exception - defined DIV elements can be dropped to the table cells marked with class "mark" (DIV id -> class name)

// only element with Id "d8" can be dropped to the cell with class name "mark smile"
REDIPS.drag.mark.exception.d8 = 'smile';

See:: only

{String} mode

Dragging mode "cell" or "row" (readonly). This is readonly property defined in a moment when DIV element or row handler is clicked.

{String} multiple_drop

Property defines "top" or "bottom" position of dropped element in table cell (if cell already contains DIV elements). It has affect only in case of drop_option="multiple".

// place dropped elements to cell top
REDIPS.drag.multiple_drop = 'top';

Default Value:: bottom

{HTMLElement} obj

Currently moved DIV element.

{HTMLElement} obj_old

Previously moved DIV element (before clicked or cloned).

{Object} only

Table cells marked with "only" class name can accept only defined DIV elements. Object contains:

{Array} div - defined DIV elements can be dropped only to the table cells marked with class name "only" (DIV id -> class name)
{String} cname - class name of marked cells (default is "only")
{String} other - allow / deny dropping DIV elements to other table cells (default is "deny")

// only element with Id "a1" can be dropped to the cell with class name "only last"
REDIPS.drag.only.div.a1 = 'last';

// DIV elements mentioned in REDIPS.drag.only.div cannot be dropped to other cells
REDIPS.drag.only.other = 'deny';

See:: mark

{Integer} opacity_disabled

Opacity level for disabled elements.

{HTMLElement} previous_cell

Reference to previous table cell.

See:: source_cell
current_cell
target_cell

{String} row_empty_color

Color of empty row.

See:: row_empty

Default Value:: White

{String} save_pname

Save content parameter name. Parameter name should be short because it will be repeated for every DIV element. It is irrelevant in case of JSON format.

See:: save_content

Default Value:: p

{Boolean} shift_after

Shift elements to empty cell after DIV element is deleted (moved to the trash cell). If set to false, table content will not be shifted. This property will have effect only if drop_option is set to "shift".

See:: drop_option

Default Value:: true

{String} shift_option

Property defines shift modes: horizontal1, horizontal2, vertical1 and vertical2. horizontal1 - horizontal shift (element shift can affect more rows) horizontal2 - horizontal shift (each row is treated separately) vertical1 - vertical shift (element shift can affect more columns) vertical2 - vertical shift (each column is treated separately)

// DIV elements will be shifted vertically (each column is treated separately)
REDIPS.drag.shift_option = 'vertical2';

See:: shift_cells

Default Value:: horizontal1

{HTMLElement} source_cell

Reference to source table cell.

See:: previous_cell
current_cell
target_cell

{Integer} speed

Autoscroll pause in milliseconds.

Default Value:: 20 (milliseconds)

{Boolean} table_sort

Table sort is feature where tables inside drop container are sorted on each element click. Clicked DIV element defines table that should be placed on the array top. Tables order is important for highlighting current cell in case of nested tables. But sometimes this feature should be turned off when one table overlays the other using "position" style relative, fixed or absolute.

Default Value:: true

{HTMLElement} target_cell

Reference to target table cell. Target table cell is defined in a moment of dropping element to the table cell.

See:: source_cell
current_cell
previous_cell

{Boolean} trash_ask

Confirm element deletion. If set to "true" popup with question: "Are you sure you want to delete?" will appear.

Default Value:: true

{Boolean} trash_ask_row

Confirm row deletion. If set to "true" popup with question: "Are you sure you want to delete row?" will appear.

Default Value:: true

{String} trash_cname

Table cell class name where DIV elements will be deleted.

Default Value:: trash

Method Detail

{HTMLElement} clone_div(div, drag)

Method clones DIV element and returns reference of the cloned element. "clone" class name will not be copied in cloned element (in case if source element contains "clone" class name). This method is called internally also.

Parameters:
{HTMLElement} div: DIV element to clone.
{Boolean} drag Optional: If set to true, then cloned DIV element will be ready for dragging (otherwise element will be only cloned).

Returns:: {HTMLElement} Returns cloned DIV element.

delete_object(el)

Method deletes DIV element from table. Input parameter is DIV reference or id of DIV element.

// delete DIV element in myhandler_dropped() event handler
rd.myhandler_dropped = function () {
    rd.delete_object(rd.obj);
}

// delete DIV element with id="d1"
rd.delete_object('d1');

Parameters:
{String|HTMLElement} el: Id of DIV element or reference of DIV element that should be deleted.

{Boolean} empty_cell(td)

Method removes elements from table cell.

// set REDIPS.drag reference
var rd = REDIPS.drag;
// search for TABLE element (from cell reference)
tbl = rd.empty_cell(td);

Parameters:
{HTMLElement} td: Table cell reference from which all the elements will be deleted.

Returns:: {Boolean} Returns false if input element is not table cell.

enable_drag(enable_flag, el, type)

Method attaches / detaches onmousedown, ontouchstart and ondblclick events to DIV elements and attaches onscroll event to the scrollable containers in initialization phase. It also can be used for element initialization after DIV element was manually added to the table. If class attribute of DIV container contains "noautoscroll" class name then autoscroll option will be disabled.

// enable element with id="id123"
enable_drag(true, 'id123');

// or init manually added element with known id
REDIPS.drag.enable_drag(true, 'id234');

// disable all elements in drag1 subtree
enable_drag(false, 'drag1', 'subtree')

// init all DIV elements in dragging area (including newly added DIV element)
REDIPS.drag.enable_drag('init');

// init added element with known reference
REDIPS.drag.enable_drag(true, my_el);

Parameters:
{String|Boolean} enable_flag: Enable / disable element (or element subtree like table, dragging container ...).
{String|HTMLElement} el Optional: Element id (or subtree) to enable / disable. Parameter defines element id or element reference of DIV element(s) to enable / disable.
{String} type Optional: Type definition for the second parameter el - element or subtree.

See:: enable_table

enable_table(enable_flag, el)

This method can select tables by class name and mark them as enabled / disabled. Instead of class name, it it possible to send table reference for enable / disable. By default, all tables are enabled to accept dropped elements.

// disable tables with class name 'mini'
enable_table(false, 'mini');

Parameters:
{Boolean} enable_flag: Enable / disable one or more tables.
{String|HTMLElement} el: Class name of table(s) to enable/disable or table reference to enable/disable.

See:: enable_drag

{Array} find_cell(param, el)

Method returns data (cell reference, row index and column index) for first or last cell in table or row / column.

// find first cell in row (el is table cell reference)
firstInRow = find_cell('firstInRow', el);
// find last cell in table (el is reference of any cell inside table)
last = find_cell('last', el);
// find last cell in column (el is table cell reference)
lastInColumn = find_cell('lastInColumn', el);

Parameters:
{String} param: Parameter defines first or last table cell (values are "first", "firstInColumn", "firstInRow", "last", "lastInColumn", "lastInRow").
{HTMLElement} el: Table cell reference (td). For "first" or "last" request, el can be any HTMLElement within table.

Returns:: {Array} Returns array with row index, column index and cell reference,

{HTMLElement} find_parent(tag_name, el, skip)

Method returns a reference of the required parent element.

// find parent TABLE element (from cell reference)
tbl = find_parent('TABLE', cell);

// find reference of the outside table (start node is TD in inner table - first TABLE node should be skipped)
tbl = find_parent('TABLE', cell, 1);

Parameters:
{String} tag_name: Tag name of parent element.
{HTMLElement} el: Start position to search.
{Integer} skip Optional: How many found nodes should be skipped. For example when start node is TD in inner table and find_parent() should return reference of the outside table.

Returns:: {HTMLElement} Returns reference of the found parent element.

{Array} get_position(ip)

Method returns position as array with members tableIndex, rowIndex and cellIndex (array length is 3). If input parameter is not defined then method will return array with current and source positions (array length will be 6).

// set REDIPS.drag reference
var rd = REDIPS.drag;
// display target and source position of dropped element
rd.myhandler_dropped = function () {
   // get target and source position (method returns positions as array)
   // pos[0] - target table index
   // pos[1] - target row index
   // pos[2] - target cell (column) index
   // pos[3] - source table index
   // pos[4] - source row index
   // pos[5] - source cell (column) index
   var pos = rd.get_position();
   // display element positions
   console.log(pos);
};

Parameters:
{String|HTMLElement} ip Optional: DIV element id / reference or table cell id / reference.

Returns:: {Array} Returns array with members tableIndex, rowIndex and cellIndex.

{String} get_style(el, style_name)

Method returns style value for requested HTML element and style name.

Parameters:
{HTMLElement} el: Requested HTML element.
{String} style_name: Asked style name.

Returns:: {String} Returns style value.

See:: http://www.quirksmode.org/dom/getstyles.html

{Array} getScrollPosition()

Method returns current page scroll position as array.

Returns:: {Array} Returns array with two members [ scrollX, scrollY ].

init(dc)

Drag container initialization. It should be called at least once (it is possible to call a method multiple times). Every page should have at least one drag container. If REDIPS.drag.init() is called without input parameter, library will search for drag container with id="drag". Only tables inside drag container will be scanned. It is possible to have several drag containers totaly separated (elements from one container will not be visible to other drag containers).

// init drag container (with default id="drag")
REDIPS.drag.init();

// init drag container with id="drag1"
REDIPS.drag.init('drag1');

Parameters:
{String} dc Optional: Drag container Id (default id "drag").

{Array} move_object(ip)

Method will calculate parameters and start animation (DIV element to the destination table cell). If "target" property is not defined then current location will be used. Here is properties definition of input parameter:

{String} id - id of element to animate - DIV element or row handler (div class="drag row")
{String} obj - reference of element to animate - DIV element or row handler (if "id" parameter exists, "obj" parameter will be ignored)
{String} mode - animation mode (if mode="row" then source and target properties should be defined)
{Array} source - source position (table index and row index)
{Array} target - target position (table, row and cell index (optional for "row" mode)
{Function} callback - callback function executed after animation is finished

Method returns array containing reference of two object. In "cell" mode returned objects are:

Array[0] - dragged element
Array[1] - dragged element

In "row" mode returned objects are:

Array[0] - table_mini
Array[1] - source row

// move element with id="a1" to the current location and after
// animation is finished display alert "Finished"
rd.move_object({
    id: 'a1',
    callback: function () {
        alert('Finished');
    }
});

// move element with id="a2" to the first table, second row and third cell
rd.move_object({
    id: 'a2',
    target: [0, 1, 2]
});
// move DIV element with reference "mydiv" to the first table, second row and third cell
rd.move_object({
    obj: mydiv,
    target: [0, 1, 2]
});
// move first row and after animation is finished call "enable_button" function
// "move_object" returns Array with references of table_mini and source row
row = rd.move_object({
          mode: 'row',            // animation mode - row
          source: [0, 0],         // source position (table index and row index)
          target: [0, 6],         // target position
          callback: enable_button // function to call after animation is over
       });

Parameters:
{Object} ip: Object with properties: id, mode, source, target and callback.

Returns:: {Array} Returns reference of two elements in array. In "cell" mode both elements are dragged element, while in "row" mode first element is table_mini and second element is source row.

relocate(from, to, mode)

Method relocates DIV elements from source table cell to the target table cell (with optional animation). If animation is enabled, then target table will be disabled until animated element reaches destination cell.

Parameters:
{HTMLElement} from: Source table cell.
{HTMLElement} to: Target table cell.
{String} mode Optional: Relocation mode "instant" or "animation". Default is "instant".

row_empty(tbl_id, row_idx, color)

Method marks selected row as empty. Could be needed for displaying initially empty table. Input parameters are table id and row index.

// set reference to the REDIPS.drag library
rd = REDIPS.drag;
// mark first row as empty in table with id="tbl1"
rd.row_empty('tbl1', 0);

Parameters:
{String} tbl_id: Table id.
{Integer} row_idx: Row index (starts from 0).
{String} color Optional: Color of empty row (default is "White" or defined with REDIPS.drag.row_empty_color parameter).

See:: row_empty_color

row_opacity(el, opacity, color)

Method sets opacity to table row or deletes row content. Input parameter "el" is reference to the table row or reference to the cloned mini table (when row is moved).

// set reference to the REDIPS.drag library
rd = REDIPS.drag;
// make row semi-transparent
rd.row_opacity(row_obj, 50);
// set row as empty and white (content in table cells will be deleted)
rd.row_opacity(row_obj, 'empty', 'White');

Parameters:
{HTMLElement|String} el: Id of row handler (div class="drag row") or reference to element (source row or mini table).
{Integer|String} opacity: Opacity level (from 0 to 100) or "empty" (then content of table cells in row will be deleted - in that case first parameter should be TR).
{String} color Optional: Background color.

{String} save_content(tbl, type)

Method scans table content and prepares query string or JSON format for submitting to the server. Input parameters are id / table reference and optional output format.

Query string:
'p[]='+id+'_'+r+'_'+c+'&p[]='+id+'_'+r+'_'+c + ...

JSON:
[["id",r,c],["id",r,c],...]

id - element id
r  - row index
c  - cell index

Query string example:
p[]=d1_1_0&p[]=d2_1_1&p[]=d3_5_2&p[]=d4_5_3

JSON example:
[["d1",1,0],["d2",1,1],["d3",5,2],["d4",5,3]]

Parameters:
{String|HTMLElement} tbl: Id or reference of table that will be scanned.
{String} type Optional: Type defines output format. If set to "json" then output will be JSON format otherwise output will be query string.

Returns:: {String} Returns table content as query string or in JSON format.

See:: save_pname

shift_cells(td1, td2)

Method shifts table content horizontally or vertically. REDIPS.drag.shift_option defines the way of how content will be shifted. Useful for sorting table content in any direction.

// define first and last table cell
var firstCell = document.getElementById('firstCellOnTable'),
    lastCell = document.getElementById('lastCellOnTable');
// enable animation
REDIPS.drag.animation_shift = true;
// shift content
REDIPS.drag.shift_cells(lastCell, firstCell);

Parameters:
{HTMLElement} td1: Source table cell.
{HTMLElement} td2: Target table cell.

See:: shift_option

Event Detail

myhandler_changed(current_cell)

Event handler invoked on every change of current (highlighted) table cell.

// set REDIPS.drag reference
var rd = REDIPS.drag;
// define myhandler_changed event handler
rd.myhandler_changed = function () {
  // get current position (method returns positions as array)
  var pos = rd.get_position();
  // display current row and current cell
  console.log('Changed: ' + pos[1] + ' ' + pos[2]);
};

Parameters:
{HTMLElement} current_cell Optional: Reference to the current (highlighted) table cell.

See:: get_position

myhandler_clicked(current_cell)

Event handler invoked if a mouse button is pressed down while the mouse pointer is over DIV element.

Parameters:
{HTMLElement} current_cell Optional: Reference to the table cell of clicked element.

myhandler_cloned()

Event handler invoked if DIV element is cloned.

myhandler_cloned_dropped(target_cell)

Event handler invoked after cloned DIV element is dropped.

Parameters:
{HTMLElement} target_cell Optional: Reference to the target table cell.

myhandler_clonedend1()

Event handler invoked if last element is cloned (type 1). Element has defined "climit1_X" class name where X defines number of elements to clone. Last element can be dragged.

myhandler_clonedend2()

Event handler invoked if last element is cloned (type 2). Element has defined "climit2_X" class name where X defines number of elements to clone. Last element can't be dragged and stays static.

myhandler_dblclicked()

Event handler invoked if a mouse button is clicked twice while the mouse pointer is over DIV element.

myhandler_deleted(cloned)

Event handler invoked if element is deleted (dropped to the "trash" table cell).

Parameters:
{Boolean} cloned Optional: True if cloned element is directly moved to the trash (in one move). If cloned element is dropped to the table and then moved to the trash then "cloned" parameter will be set to false.

myhandler_dropped(target_cell)

Event handler invoked if element is dropped to the table cell.

Parameters:
{HTMLElement} target_cell Optional: Target cell reference.

myhandler_dropped_before(target_cell)

Event handler invoked if mouse button is released but before element is dropped to the table cell. If boolen "false" is returned from event handler then element drop will be canceled. Dragged element will be returned to the start position while cloned element will be deleted.

Parameters:
{HTMLElement} target_cell Optional: Target cell reference.

myhandler_moved()

Event handler invoked if element is moved from home position.

myhandler_notcloned()

Event handler invoked if cloned element is dropped on start position or cloned element is dropped outside current table with "delete_cloned" property set to true. This event handler could be also invoked if "clone" type element is placed inside forbidden table cell.

See:: delete_cloned

myhandler_notmoved()

Event handler invoked if a mouse button is pressed down and released while the mouse pointer is over DIV element (element was not actually moved).

myhandler_row_changed(current_cell)

Event handler invoked on every change of current (highlighted) table row.

Parameters:
{HTMLElement} current_cell Optional: Reference to the current (highlighted) table cell.

myhandler_row_clicked(current_cell)

Event handler invoked if a mouse button is pressed down while the mouse pointer is over row handler (div class="drag row").

Parameters:
{HTMLElement} current_cell Optional: Reference to the table cell of clicked element.

myhandler_row_cloned()

Event handler invoked if table row is cloned.

myhandler_row_deleted()

Event handler invoked if row is deleted (dropped to the "trash" table cell).

myhandler_row_dropped(target_cell)

Event handler invoked after row is dropped to the table cell.

Parameters:
{HTMLElement} target_cell Optional: Reference to the target table cell.

myhandler_row_dropped_before()

Event handler invoked if mouse button is released but before row is dropped to the table. If boolen "false" is returned from event handler then row drop will be canceled.

myhandler_row_dropped_source(target_cell)

Event handler invoked if row is moved around and dropped to the home position.

Parameters:
{HTMLElement} target_cell Optional: Reference to the target table cell.

myhandler_row_moved()

Event handler invoked if row is moved from home position.

myhandler_row_notcloned()

Event handler invoked if cloned row is dropped to the source row.

myhandler_row_notmoved()

Event handler invoked if a mouse button is pressed down and released while the mouse pointer is over row handler (row was not actually moved).

myhandler_row_undeleted()

Event handler invoked if row is undeleted. After row is dropped to the "trash" table cell and "trash_ask_row" property is set to true then popup with question: "Are you sure you want to delete row?" will appear. Clicking on "Cancel" will undelete row and call this event handler.

See:: trask_ask_row

myhandler_switched(target_cell)

Event handler invoked if DIV elements are switched (drop_option is set to "switch").

Parameters:
{HTMLElement} target_cell Optional: Reference to the target table cell.

See:: drop_option

myhandler_undeleted()

Event handler invoked if element is undeleted. After element is dropped to the "trash" table cell and "trash_ask" property is set to true then popup with question: "Are you sure you want to delete?" will appear. Clicking on "Cancel" will undelete element and call this event handler.

See:: trask_ask

This entry was posted on July 3, 2011 and is filed under Drag and Drop, JavaScript

39 Responses to REDIPS.drag documentation

Anthony says:

10.02.2012. at 12:01

Thank you for the quick reply. I look forward to the column drag and drop, that will be quite something! As for the second question I managed to get the drag functionality working as I expected, I was just trying to ensure that cells from one table could not be dragged into another table within the same DIV drag container.
dbunic says:

12.02.2012. at 13:39

Anthony - I'm glad you find a solution and dragging works as expected. Cheers!
MichaelD says:

05.03.2012. at 17:20

rowhandler should be documented !
It is used in example 15 I believe, but one can spend hours trying to figure it out.
PS
Great job on browser compatibility.
Best regards
MichaelD says:

05.03.2012. at 17:30

Maybe I have missed it, but I wish I could limit drag to just X or Y and within drag container.
Also it would be great if I could limit drag within area of drag container.

E.g.: I would like to create scrollable table when user can reorder rows, but:
- drag is not allowed beyond table container,
- and since we are talking about draging rows, there is only vertical draging.

Best regards,
MichaelD

PS
The feature with 'bound' and autoscroll is perfect, also scroll speed.
One do have to appreciate the thought, level of detail and care/quality your team did put into the product.
dbunic says:

08.03.2012. at 14:18
@MichaelD - You are right, I have to work more on REDIPS.drag documentation and document all class name keywords like: rowhandler, row, clone, single, mark, only, nolayout, trash and noautoscroll.

DIV elements / rows can be moved only inside its own drag container. Please see example08 for more details.

On the other hand, it's possible to enable/disable tables within the same container. Here is code snippet from example17 where some tables are enabled/disabled in a moment of click on row handler.
```
// row was clicked - enable / disable tables
rd.myhandler_row_clicked = function () {
    // find table
    var tbl = rd.find_parent('TABLE', rd.obj);
    // if row belongs to the "main" table
    if (tbl.className.indexOf('main') > -1) {
        rd.enable_table(false, 'view');
        rd.enable_table(true, 'main');
    }
    // row belongs to the "view" table
    else {
        rd.enable_table(true, 'view');
        rd.enable_table(false, 'main');
    }
};
```
Input parameters for enable_table(flag, 'className') method are boolean flag TRUE/FALSE and table class name.

And thank you for nice words for REDIPS.drag library.

P.S.
I'm the only member of my team
Jude says:

09.03.2012. at 00:09

Hi Darko, thanks for the amazing plug-in you provided. I'm currently working on a legacy page that is using drag-n'-drop version 1.6.3, which doesn't support firefox and chrome. I'm wondering if there's any relatively easy way to upgrade to the latest version without rewrite the whole thing?

Thanks.
Jude says:

09.03.2012. at 05:23

Never mind, I found I just need to declare an obj before using it. That fixed everything. Now the outdated drag-n-drop plugin works like a charm in firefox.
dbunic says:

13.03.2012. at 09:11

@MichaelD - REDIPS.drag documentation - Appendix A is published with list of all keywords used in REDIPS.drag library. Documentation is always welcome.

@Jude - I'm glad you solve the problem and thank you for using REDIPS.drag lib.
Mj says:

21.03.2012. at 07:01

How can I used jQuery with this code. I have a problem whenever I used jQuery ...
dbunic says:

22.03.2012. at 10:14

@Mj - REDIPS.drag library is written in its own namespace so there shouldn't be collision with other JS frameworks. Maybe the problem in your case is related to initialization of REDIPS.drag. Just be sure that REDIPS.drag.init() is called after page is loaded. Or for testing purpose, you can call init method on button click and DIV dragging should be enabled. If you have online example, I can peek to the HTML source to see where is the problem.
Crisy says:

29.03.2012. at 12:38

Hi, great job with REDIPS.drag.
Is there a method like enable_drag(enable_flag, el, type) for mark?
I want to mark a td in a handler (after I change the class in javascript) and put exceptions and all that.

dbunic says:

30.03.2012. at 11:21

@Crisy - Exceptions can be dynamically added to the marked table cells. Example07 contains such scenario. Here is snippet from example07/script2.js after element is cloned:

// event handler after element is cloned
rd.myhandler_cloned = function () {
    // set id of cloned element
    var cloned_id = rd.obj.id;
    // if id of cloned element begins with "e" then make exception
    // (allow DIV element to access cell with class name "mark")
    if (cloned_id.substr(0, 1) === 'e') {
        rd.mark.exception[cloned_id] = 'mark';
    }
};

Crisy says:

30.03.2012. at 14:40

I know about the exceptions I read the ex.
What I need is to mark a td dynamically, I tried to change the class of the td but it doesn't act like a marked td after that it still allows divs to drop in it.

Thanks.
dbunic says:

30.03.2012. at 15:20
@Crisy - TD class name can be dynamically changed. After class name is changet to mark, this cell should be forbidden and DIV can't be dropped to it. For example, if you have the following TD:
```
<td id="mycell"></td>
```
With simple JS code class name can be changed:
```
// show prepared content for saving
function mark_cell() {
    // define reference to the table cell
    var c = document.getElementById('mycell');
    // set mark class name to the cell with id "mycell
    c.className = 'mark';
}
```
Try to call mark_cell() function on some button click - you can modify example01 for testing. After "mark" class is added to the table cell, it will act immediately as marked table cell.
Crisy says:

30.03.2012. at 16:05

That's like what i am doing. Only the initial class is "mark something" and i change it in "mark somethingelse". I will keep testing, hope it will work.
Thanks again.
Manny says:

03.04.2012. at 16:48
I would like to know if there is a way to name a cell? As an example instead of a cell being call 1,1 could you label each cell 1,1 becomes 101? This way when the save content scans table content it would read:
```
Id=d150 Cell=101
Id=d123 Cell=102
Id=d118 Cell=103
Id=d137 Cell=104
```

dbunic says:

03.04.2012. at 18:58

@Manny - REDIPS.drag currently does not have such option. Here is code snippet from save_content() method:

// iterate through each table cell (line 2387)
for (c = 0; c < cells; c++) {
    // set reference to the table cell
    tbl_cell = tbl.rows[r].cells[c];
    // if cells isn't empty (no matter is it allowed or denied table cell)
    if (tbl_cell.childNodes.length > 0) {
        // cell can contain many DIV elements
        for (d = 0; d < tbl_cell.childNodes.length; d++) {
            // set reference to the child node
            cn = tbl_cell.childNodes[d];
            // childNode should be DIV with containing "drag" class name
            if (cn.nodeName === "DIV" && cn.className.indexOf("drag") > -1) {
                // prepare query string
                query += pname + "[]=" + cn.id + "_" + r + "_" + c + "&";
                // push values for DIV element as Array to the Array
                JSONobj.push([cn.id, r, c]);
            }
        }
    }
}

You can modify the following line to prepare different format (r - row, c - column):

query += pname + "[]=" + cn.id + "_" + r + "_" + c + "&";

Actually, this line creates URL with parameters that will be send to the server. Hope this info will help you to apply needed customization.

joven says:

15.05.2012. at 05:07

I would like to know if there is a way to check a cell if empty and then move the div to that empty cell?

example:

column1 | column2 | column3 |
=============================
        |   div1  |         |
=============================
  div2  |         |   div3  |
=============================
        |   div4  |   div5  |
=============================

and then after running the function on click the output will be:

column1 | column2 | column3 |
=============================
  div2  |   div1  |   div3  |
=============================
        |   div4  |   div5  |
=============================
        |         |         |
=============================

So basically it will just moved the div's to the very top of each column. I have tried combining rd.moved_object with any other techniques. Thanks in advance for any help.

dbunic says:

16.05.2012. at 10:36

@joven - First download latest redips2.tar.gz package with version 4.6.16 because I have fixed small glitch in REDIPS.drag.relocate() method. And here is JS function that should do the job. All DIV elements in table with id="mytable" will be moved to the table top.

function myshift() {
    // table reference
    var tbl = document.getElementById('mytable'),
        rows = tbl.rows,               // rows reference
        rownum = rows.length,          // number of rows
        colnum = rows[0].cells.length, // number of columns
        empty,                         // flag (true if upper cell is empty)
        c,                             // current cell
        i, j, k;                       // loop variables
    // column loop
    for (i = 0; i < colnum; i++) {
        // row loop (it goes from second row)
        for (j = 1; j < rownum; j++) {
            // loop from current row to the table top
            for (k = j - 1; k >= 0; k--) {
                // set cell reference
                c = rows[k].cells[i];
                // set empty flag
                empty = (/^\s*$/.test(c.innerHTML)) ? true : false;
                // if cell is not empty then break the loop
                if (!empty) {
                    break;
                }
            }
            // relocate DIV elements
            REDIPS.drag.relocate(rows[j].cells[i], rows[k + 1].cells[i]);
        }
    }
}

REDIPS.drag documentation

Related posts

39 Responses to REDIPS.drag documentation

Leave a Reply Cancel reply

Categories

Most commented

Recent Posts

Recent Comments

Documentation