REDIPS.drag documentation

Default Value:

20 (milliseconds)

Default Value:

false

Default Value:

2 px

Default Value:

solid

Default Value:

dotted

Default Value:

25 (px)

Default Value:

false

Default Value:

false

See:

source_cell
previous_cell

Default Value:

true

Default Value:

false

// 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

// 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';

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

See:

only

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

Default Value:

bottom

// 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

See:

source_cell
current_cell

See:

row_empty

Default Value:

White

See:

drop_option

Default Value:

true

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

See:

shift_cells

Default Value:

horizontal1

See:

previous_cell
current_cell

Default Value:

20 (milliseconds)

See:

source_cell
current_cell
previous_cell

Default Value:

true

Default Value:

true

Default Value:

trash

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

// 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 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

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

Parameters:

{String|HTMLElement} el

Class name of table(s) to enable/disable or table reference to enable/disable.

See:

enable_drag

// 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,

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

Parameters:

{String} tag_name

Tag name of parent element.

{HTMLElement} el

Start position to search.

Returns:

{HTMLElement} Returns reference of the found parent element.

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

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

Returns:

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

// 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").

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

Parameters:

{HTMLElement} from

Source table cell.

{HTMLElement} to

Target table cell.

{String} mode Optional

Relocation mode "instant" or "animation". Default is "instant".

// 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

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

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.

// 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

// 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

Parameters:

{HTMLElement} current_cell Optional

Reference to the table cell of clicked element.

Parameters:

{HTMLElement} target_cell Optional

Reference to the target table cell.

Parameters:

{HTMLElement} target_cell Optional

Reference to the target table cell.

See:

delete_cloned

Parameters:

{HTMLElement} current_cell Optional

Reference to the current (highlighted) table cell.

Parameters:

{HTMLElement} current_cell Optional

Reference to the table cell of clicked element.

Parameters:

{HTMLElement} target_cell Optional

Reference to the target table cell.

Parameters:

{HTMLElement} target_cell Optional

Reference to the target table cell.

See:

trask_ask_row

Parameters:

{HTMLElement} target_cell Optional

Reference to the target table cell.

See:

drop_option

See:

trask_ask