REDIPS.drag documentation

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

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

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

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

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

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

Default Value:

multiple

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

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

// set red border for highlighted TD
REDIPS.drag.hover.borderTd = '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.multipleDrop = 'top';

Default Value:

bottom

// only element with Id "a1" can be dropped to the cell with class name "redips-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

Default Value:

before

Default Value:

p

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

// delete overflowed DIV element
REDIPS.drag.shift.overflow = 'delete';

See:

dropMode
shiftCells

// define border style for disabled elements
REDIPS.drag.style.borderDisabled = 'dashed';

Default Value:

true

// confirm DIV element delete action
REDIPS.drag.trash.question = 'Are you sure you want to delete DIV element?';

// confirm row delete action
REDIPS.drag.trash.questionRow = 'Are you sure you want to delete table row?';

// simple AJAX call without callback function
REDIPS.drag.ajaxCall('ajax_save.php?a=1&b=2');

// simple AJAX call (GET method)
REDIPS.drag.ajaxCall('ajax_menu.php?month=2&year=2017', myHandler);

// AJAX call with passing dragged element as div property
REDIPS.drag.ajaxCall('ajax_menu.php?month=2&year=2017', myHandler, {div: rd.obj});

// AJAX call with POST method and data in name-value format
// header 'application/x-www-form-urlencoded' is automatically applied
REDIPS.drag.ajaxCall('ajax_menu.php', myHandler, {method: 'POST', data: 'name1=value1&name2=value2'});

// xhr is XMLHttpRequest object and obj is passed from ajaxCall() to this callback function
// obj is optionally defined and if is not needed then it can be omitted as input parameter
myHandler = function (xhr, obj) {
    ...
    ...
};

// it is also possible to wrap error handling inside callback function
// this can be useful in case of many different AJAX calls with specific error processing to each call
myHandler = function (xhr, obj) {
    // if status is OK
    if (xhr.status === 200) {
        ...
    }
    // otherwise display error
    else {
        setTimeout(function () {
            alert('AJAX error: [' + xhr.status + '] ' + xhr.statusText);
        }, 10);
    }
};


// general error handler called in case of AJAX error (if xhr.status !== 200)
// obj is optional parameter
REDIPS.drag.error.ajax = function (xhr, obj) {
    // non blocking alert (alert called with setTimeout())
    setTimeout(function () {
        alert('AJAX error: [' + xhr.status + '] ' + xhr.statusText);
    }, 10);
    // return false to stop execution of callback function
    return false;
};

Parameters:

{String} url

URL address of AJAX service. In case of GET method it should contain all parameters in name-value format.

{Object} callBack Optional

Callback function called after request is ended (successfully or not). Function is called with xhr (XMLHttpRequest) object and obj object as input parameters.

{Object} obj Optional

Object with optional AJAX parameters (like POST method and data) or used for sending additional parameters to the callback function.

See:

error.ajax

// delete all DIV elements from table with id=tbl1
rd.clearTable('tbl1');

Parameters:

{String|HTMLElement} el

Table Id or table reference from which all elements should be deleted.

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 event.dropped() event handler
rd.event.dropped = function () {
    rd.deleteObject(rd.obj);
}

// delete DIV element with id="d1"
rd.deleteObject('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.emptyCell(td);

// how to test TD if cell is occupied
var empty = rd.emptyCell(td, 'test');

Parameters:

{HTMLElement} tdElement

Table cell to test or from which all the elements will be deleted.

{String} mode Optional

If mode is set to “test” then method will only test TD and return true or false.

Returns:

{Boolean|Array} Returns true/false depending on cell content or array with deleted child nodes.

// enable element with id="id123" (element id should be string according to DOM docs)
rd.enableDrag(true, '#id123');

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

// disable all DIV elements in drag1 subtree
rd.enableDrag(false, '#drag1 div')

// init DIV elements in dragging area (including newly added DIV element)
// DIV initialization will work if table node stays intact (table is not generated dynamically)
REDIPS.drag.enableDrag('init');

// init added element with reference myElement
REDIPS.drag.enableDrag(true, myElement);

// disable all DIV elements within TD (td is reference to TD node)
REDIPS.drag.enableDrag(false, td);

Parameters:

{Boolean|String} enableFlag

Enable / disable element (or element subtree like table, dragging container …).

{HTMLElement|String} el Optional

HTML node or CSS selector to enable / disable. Parameter defines element reference or CSS selector of DIV elements to enable / disable.

See:

init
enableTable

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

Parameters:

{Boolean} enableFlag

Enable / disable one or more tables.

{String|HTMLElement} el

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

See:

enableDrag

// find first cell in row (el is table cell reference)
firstInRow = findCell('firstInRow', el);

// find last cell in table (el is reference of any cell inside table)
last = findCell('last', el);

// find last cell in column (el is table cell reference)
lastInColumn = findCell('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 = findParent('TABLE', cell);

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

Parameters:

{String} tagName

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 findParent() should return reference of the outside table.

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.event.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.getPosition();
   // 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. If position is not found then all array members will have value -1.

Returns:

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

Parameters:

{HTMLElement} el

Requested HTML element.

{String} styleName

Asked style name.

Returns:

{String} Returns style value.

See:

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

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

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

Parameters:

{String} dc Optional

Drag container Id (default is “redips-drag”).

See:

initTables
enableDrag

// call initTables after new empty table is added to the div#redips-drag
// REDIPS.init() method will also work but with some overhead
REDIPS.drag.initTables();

// change default selector for table search (div#sticky may contain table that is attached out of default drag container)
// this means that table should not be a part of div#redips-drag, but it should be positioned within drag container otherwise dragging will not work
REDIPS.drag.initTables('#my-drag table, #sticky table');

// if new table is not empty and contains DIV elements then they should be enabled also
// DIV elements in "redips-drag" container are enabled by default
REDIPS.drag.initTables('#my-drag table, #sticky table');
REDIPS.drag.enableDrag(true, '#sticky div');

Parameters:

{String} selector Optional

Defines selector for table search (default id “#redips-drag table”).

// load content from AJAX service to table with reference targetTable
REDIPS.drag.loadContent(targetTable, 'db_ajax1.php');

// load content from JSON text to table with reference targetTable
REDIPS.drag.loadContent(targetTable, '[["d16", 6, 2, "orange", "B2"], ["d17", 7, 4, "orange", "B1"]]');

// load content from array to table with id "myTable"
REDIPS.drag.loadContent('myTable', [["d6", 6, 2, "green", "A2"], ["d7", 7, 4, "green", "A1"]]);

Parameters:

{HTMLElement|String} targetTable

Reference or id of target table where DIV elements will be inserted

{String|Array} param

JSON text or array (JSON formatted array) or AJAX URL to retrieve JSON data

See:

saveContent
error.loadContent

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

// move DIV element with reference "mydiv" to the TD with reference td
rd.moveObject({
    obj: mydiv,
    target: td
});

// move DIV element with reference "mydiv" to the first table, second row and third cell
rd.moveObject({
    obj: mydiv,
    target: [0, 1, 2]
});

// move element with id="a2" to the first table, second row and third cell
rd.moveObject({
    id: 'a2',
    target: [0, 1, 2]
});

// clone DIV element with reference "mydiv", move to the first table, second row,
// third cell and overwrite all content in target cell
rd.moveObject({
    obj: mydiv,
    clone: true,
    overwrite: true,
    target: [0, 1, 2]
});

// move first row and after animation is finished call "enable_button" function
// "moveObject" returns Array with references of tableMini and source row
row = rd.moveObject({
          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|Boolean} Returns reference of two elements in array or false. In “cell” mode both elements are dragged element, while in “row” mode first element is tableMini and second element is source row or it could be false if “emptyRow” try to move.

See:

relocate

Parameters:

{HTMLElement} from

Source table cell.

{HTMLElement} to

Target table cell.

{String} mode Optional

Relocation mode “instant” or “animation”. Default is “instant”.

See:

event.relocateBefore
event.relocateAfter
event.relocateEnd

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

Parameters:

{String} tblId

Table id.

{Integer} rowIdx

Row index (starts from 0).

{String} color Optional

Color of empty row (default is “White” or defined with REDIPS.drag.rowEmptyColor parameter).

See:

style.rowEmptyColor

// set reference to the REDIPS.drag library
rd = REDIPS.drag;

// make row semi-transparent
rd.rowOpacity(rowObj, 50);

// set row as empty and white (content in table cells will be deleted)
rd.rowOpacity(rowObj, 'empty', 'White');

Parameters:

{HTMLElement|String} el

Id of row handler (div class=”redips-drag redips-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+'_'+n+'_'+t+'&p[]='+id+'_'+r+'_'+c+'_'+n+'_'+t ...

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

id - element id
r  - row index
c  - cell index
n  - class names
t  - DIV innerText

Query string example:
p[]=d1_1_0_blue_Name1&p[]=d2_1_1_green_Name2&p[]=d3_5_2_green_Name3&p[]=d4_5_3_red_Name4

JSON output example:
[["d1",1,0,"blue","Name1"],["d2",1,1,"green","Name2"],["d3",5,2,"green","Name3"],["d4",5,3,"red","Name4"]]

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:

saveParamName
loadContent

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

Parameters:

{HTMLElement} td1

Source table cell.

{HTMLElement} td2

Target table cell.

See:

shift.mode

Parameters:

{Object} xhr Optional

Input parameter is XMLHttpRequest object (xhr)

{Object} obj Optional

Object with optional AJAX parameters (like POST method and data) or used for sending additional parameters to the callback function.

See:

ajaxCall

Parameters:

{Object} obj Optional

Object properties are: type (message type), message text (error description), content (DIV content), rowIndex and cellIndex

See:

loadContent

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

Parameters:

{HTMLElement} currentCell Optional

Reference to the current (highlighted) table cell.

See:

getPosition

Parameters:

{HTMLElement} currentCell Optional

Reference to the table cell of clicked element.

Parameters:

{HTMLElement} clonedElement Optional

Cloned element reference.

See:

moveObject

Parameters:

{HTMLElement} targetCell Optional

Reference to the target 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.

Parameters:

{HTMLElement} targetCell Optional

Target cell reference.

Parameters:

{HTMLElement} targetCell Optional

Target cell reference.

Parameters:

{Boolean} cloned Optional

True if moved element is actually a cloned DIV. Needed for cases when obj or objOld should be used.

See:

clone.drop

Parameters:

{HTMLElement} div

Reference of DIV element that is relocated.

{HTMLElement} td

Reference of TD where DIV element is relocated.

See:

relocate
event.relocateBefore
event.relocateEnd

Parameters:

{HTMLElement} div

Reference of DIV element that will be relocated.

{HTMLElement} td

Reference of TD where DIV element will be relocated.

See:

relocate
event.relocateAfter
event.relocateEnd

See:

relocate
event.relocateBefore
event.relocateAfter

Parameters:

{HTMLElement} currentCell Optional

Reference to the current (highlighted) table cell.

Parameters:

{HTMLElement} currentCell Optional

Reference to the table cell of clicked element.

Parameters:

{HTMLElement} targetRow Optional

Reference to the target row (dropped row).

{HTMLElement} sourceTable Optional

Source table reference. If row is dropped to the same table then this reference and targetRow will be in correlation (actually “source table” contains targetRow).

{Integer} sourceRowIndex Optional

Source row index.

Parameters:

{HTMLElement} sourceTable Optional

Source table reference.

{Integer} sourceRowIndex Optional

Source row index.
If boolen “false” is returned from event handler then row drop will be canceled.

Parameters:

{HTMLElement} targetCell Optional

Reference to the target table cell.

See:

trash

Parameters:

{HTMLElement} td

Reference of TD where overflow happen.

See:

dropMode

Parameters:

{HTMLElement} targetCell Optional

Reference to the target table cell.

See:

dropMode

See:

trash