Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

5.0.0

- big code cleaning
- majority of properties, methods and event handlers are renamed
(camelCase syntax is used)
- added option to set delete confirmation question (for deleting DIV
element and row)
  • Loading branch information...
commit a7952290bf9384afa6d1611af0447fd2b6164913 1 parent 6f18a72
Darko Bunic authored
Showing with 1,478 additions and 1,540 deletions.
  1. +5 −0 changes.txt
  2. +8 −8 example01/index.html
  3. +34 −29 example01/script.js
  4. +12 −11 example02/script.js
  5. +2 −0  example02/style.css
  6. +17 −18 example03/ajax/script.js
  7. +0 −1  example03/config.php
  8. +47 −55 example03/script.js
  9. +40 −40 example04/script.js
  10. +4 −4 example05/script.js
  11. +1 −0  example05/style.css
  12. +9 −9 example06/script.js
  13. +6 −6 example07/script1.js
  14. +6 −8 example07/script2.js
  15. +5 −5 example08/script.js
  16. +1 −1  example09/index.html
  17. +19 −18 example09/script.js
  18. +8 −8 example10/script.js
  19. +6 −8 example11/script.js
  20. +9 −9 example12/script.js
  21. +15 −15 example13/script.js
  22. +3 −3 example14/index.html
  23. +13 −13 example14/script.js
  24. +25 −24 example15/script.js
  25. +41 −39 example16/script.js
  26. +72 −72 example17/script.js
  27. +2 −2 example18/index.html
  28. +12 −12 example18/script.js
  29. +13 −13 example18/script1.js
  30. +13 −13 example19/script.js
  31. +26 −27 example20/script.js
  32. +9 −9 example21/index.html
  33. +26 −23 example21/script.js
  34. +15 −15 example22/script.js
  35. +9 −11 example23/script.js
  36. +25 −25 example24/script.js
  37. +10 −10 index.html
  38. +61 −62 redips-drag-min.js
  39. +849 −914 redips-drag-source.js
5 changes.txt
View
@@ -1,5 +1,10 @@
Changes for REDIPS.drag library
+5.0.0
+- big code cleaning
+- majority of properties, methods and event handlers are renamed (camelCase syntax is used)
+- added option to set delete confirmation question (for deleting DIV element and row)
+
4.7.6
- added event handler myhandler_relocated() - event can be triggered after single call of relocate() method or after all DIV elements are shifted in "shift" mode
16 example01/index.html
View
@@ -130,14 +130,14 @@
</table>
<div><input type="button" value="Save1" class="button" onclick="save('plain')" title="Send content to the server (it will only show accepted parameters)"/><span class="message_line">Save content of the first table (plain query string)</span></div>
<div><input type="button" value="Save2" class="button" onclick="save('json')" title="Send content to the server (it will only show accepted parameters)"/><span class="message_line">Save content of the first table (JSON format)</span></div>
- <div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="multiple" title="Enabled dropping to already taken table cells" checked="true"/><span class="message_line">Enable dropping to already taken table cells</span></div>
- <div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="single" title="Disabled dropping to already taken table cells"/><span class="message_line">Disable dropping to already taken table cells</span></div>
- <div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="switch" title="Switch content"/><span class="message_line">Switch content</span></div>
- <div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="switching" title="Switching content continuously"/><span class="message_line">Switching content continuously</span></div>
- <div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="overwrite" title="Overwrite content"/><span class="message_line">Overwrite content</span></div>
- <div><input type="checkbox" class="checkbox" onclick="toggle_delete_cloned(this)" title="Remove cloned object if dragged outside of any table" checked="true"/><span class="message_line">Remove cloned element if dragged outside of any table</span></div>
- <div><input type="checkbox" class="checkbox" onclick="toggle_confirm(this)" title="Confirm delete" checked="true"/><span class="message_line">Confirm delete</span></div>
- <div><input type="checkbox" class="checkbox" onclick="toggle_dragging(this)" title="Enable dragging" checked="true"/><span class="message_line">Enable dragging</span></div>
+ <div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="multiple" title="Enabled dropping to already taken table cells" checked="true"/><span class="message_line">Enable dropping to already taken table cells</span></div>
+ <div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="single" title="Disabled dropping to already taken table cells"/><span class="message_line">Disable dropping to already taken table cells</span></div>
+ <div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="switch" title="Switch content"/><span class="message_line">Switch content</span></div>
+ <div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="switching" title="Switching content continuously"/><span class="message_line">Switching content continuously</span></div>
+ <div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="overwrite" title="Overwrite content"/><span class="message_line">Overwrite content</span></div>
+ <div><input type="checkbox" class="checkbox" onclick="toggleDeleteCloned(this)" title="Remove cloned object if dragged outside of any table" checked="true"/><span class="message_line">Remove cloned element if dragged outside of any table</span></div>
+ <div><input type="checkbox" class="checkbox" onclick="toggleConfirm(this)" title="Confirm delete"/><span class="message_line">Confirm delete</span></div>
+ <div><input type="checkbox" class="checkbox" onclick="toggleDragging(this)" title="Enable dragging" checked="true"/><span class="message_line">Enable dragging</span></div>
</div>
</body>
</html>
63 example01/script.js
View
@@ -5,50 +5,50 @@
"use strict";
// define redips_init variable
-var redips_init;
+var redipsInit;
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// reference to the REDIPS.drag library and message line
var rd = REDIPS.drag,
msg = document.getElementById('message');
// how to display disabled elements
- rd.border_disabled = 'solid'; // border style for disabled element will not be changed (default is dotted)
- rd.opacity_disabled = 60; // disabled elements will have opacity effect
+ rd.style.borderDisabled = 'solid'; // border style for disabled element will not be changed (default is dotted)
+ rd.style.opacityDisabled = 60; // disabled elements will have opacity effect
// initialization
rd.init();
// only "smile" can be placed to the marked cell
rd.mark.exception.d8 = 'smile';
// prepare handlers
- rd.myhandler_clicked = function () {
+ rd.event.clicked = function () {
msg.innerHTML = 'Clicked';
};
- rd.myhandler_dblclicked = function () {
+ rd.event.dblClicked = function () {
msg.innerHTML = 'Dblclicked';
};
- rd.myhandler_moved = function () {
+ rd.event.moved = function () {
msg.innerHTML = 'Moved';
};
- rd.myhandler_notmoved = function () {
+ rd.event.notMoved = function () {
msg.innerHTML = 'Not moved';
};
- rd.myhandler_dropped = function () {
+ rd.event.dropped = function () {
msg.innerHTML = 'Dropped';
};
- rd.myhandler_switched = function () {
+ rd.event.switched = function () {
msg.innerHTML = 'Switched';
};
- rd.myhandler_clonedend1 = function () {
+ rd.event.clonedEnd1 = function () {
msg.innerHTML = 'Cloned end1';
};
- rd.myhandler_clonedend2 = function () {
+ rd.event.clonedEnd2 = function () {
msg.innerHTML = 'Cloned end2';
};
- rd.myhandler_notcloned = function () {
+ rd.event.notCloned = function () {
msg.innerHTML = 'Not cloned';
};
- rd.myhandler_deleted = function (cloned) {
+ rd.event.deleted = function (cloned) {
// if cloned element is directly moved to the trash
if (cloned) {
// set id of original element (read from redips property)
@@ -59,18 +59,18 @@ redips_init = function () {
msg.innerHTML = 'Deleted';
}
};
- rd.myhandler_undeleted = function () {
+ rd.event.undeleted = function () {
msg.innerHTML = 'Undeleted';
};
- rd.myhandler_cloned = function () {
+ rd.event.cloned = function () {
// display message
msg.innerHTML = 'Cloned';
// append 'd' to the element text (Clone -> Cloned)
rd.obj.innerHTML += 'd';
};
- rd.myhandler_changed = function () {
+ rd.event.changed = function () {
// get target and source position (method returns positions as array)
- var pos = rd.get_position();
+ var pos = rd.getPosition();
// display current row and current cell
msg.innerHTML = 'Changed: ' + pos[1] + ' ' + pos[2];
};
@@ -78,26 +78,31 @@ redips_init = function () {
// toggles trash_ask parameter defined at the top
-function toggle_confirm(chk) {
- REDIPS.drag.trash_ask = chk.checked;
+function toggleConfirm(chk) {
+ if (chk.checked === true) {
+ REDIPS.drag.trash.question = 'Are you sure you want to delete DIV element?';
+ }
+ else {
+ REDIPS.drag.trash.question = null;
+ }
}
// toggles delete_cloned parameter defined at the top
-function toggle_delete_cloned(chk) {
- REDIPS.drag.delete_cloned = chk.checked;
+function toggleDeleteCloned(chk) {
+ REDIPS.drag.deleteCloned = chk.checked;
}
// enables / disables dragging
-function toggle_dragging(chk) {
- REDIPS.drag.enable_drag(chk.checked);
+function toggleDragging(chk) {
+ REDIPS.drag.enableDrag(chk.checked);
}
// function sets drop_option parameter defined at the top
-function set_drop_option(radio_button) {
- REDIPS.drag.drop_option = radio_button.value;
+function setMode(radioButton) {
+ REDIPS.drag.dropMode = radioButton.value;
}
@@ -106,7 +111,7 @@ function save(type) {
// define table_content variable
var table_content;
// prepare table content of first table in JSON format or as plain query string (depends on value of "type" variable)
- table_content = REDIPS.drag.save_content('table1', type);
+ table_content = REDIPS.drag.saveContent('table1', type);
// if content doesn't exist
if (!table_content) {
alert('Table is empty!');
@@ -125,8 +130,8 @@ function save(type) {
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
23 example02/script.js
View
@@ -4,17 +4,17 @@
/* enable strict mode */
"use strict";
-// define redips_init variable
-var redips_init;
+// define redipsInit variable
+var redipsInit;
// redips initialization
-redips_init = function () {
+redipsInit = function () {
var num = 0, // number of successfully placed elements
rd = REDIPS.drag; // reference to the REDIPS.drag lib
// initialization
rd.init();
// set hover color
- rd.hover.color_td = '#9BB3DA';
+ rd.hover.colorTd = '#9BB3DA';
// define green elements for green cells
rd.mark.exception.green = 'green_cell';
rd.mark.exception.greenc0 = 'green_cell';
@@ -24,12 +24,13 @@ redips_init = function () {
rd.mark.exception.orangec0 = 'orange_cell';
rd.mark.exception.orangec1 = 'orange_cell';
// this function (event handler) is called after element is dropped
- rd.myhandler_dropped = function () {
- var msg; // message text
+ rd.event.dropped = function () {
+ // message text
+ var msg;
// if the DIV element was placed on allowed cell then
- if (rd.target_cell.className.indexOf(rd.mark.exception[rd.obj.id]) !== -1) {
+ if (rd.td.target.className.indexOf(rd.mark.exception[rd.obj.id]) !== -1) {
// make it a unmovable
- rd.enable_drag(false, rd.obj.id);
+ rd.enableDrag(false, rd.obj.id);
// increase counter
num++;
// prepare and display message
@@ -46,8 +47,8 @@ redips_init = function () {
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
-}
+ window.attachEvent('onload', redipsInit);
+}
2  example02/style.css
View
@@ -37,6 +37,8 @@ body{
/* without width, IE6/7 will not apply filter/opacity to the element ?! */
/* IE needs element layout */
width: 82px;
+ height: 25px;
+ line-height: 25px;
/* round corners */
border-radius: 4px; /* Opera, Chrome */
-moz-border-radius: 4px; /* FF */
35 example03/ajax/script.js
View
@@ -5,42 +5,41 @@
"use strict";
// functions
-var redips_init, // define redips_init variable
+var redipsInit, // define redipsInit variable
initXMLHttpClient, // create XMLHttp request object in a cross-browser manner
- send_request, // send AJAX request
+ sendRequest, // send AJAX request
request, // XMLHttp request object
- print_message; // print message
+ printMessage; // print message
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// reference to the REDIPS.drag object
var rd = REDIPS.drag;
// create XMLHttp request object
request = initXMLHttpClient();
// REDIPS.drag initialization
rd.init();
- rd.drop_option = 'single'; // dragged elements can be placed to the empty cells only
- rd.hover.color_td = '#9BB3DA'; // set hover color
- rd.trash_ask = false; // do not ask on delete
+ rd.dropMode = 'single'; // dragged elements can be placed to the empty cells only
+ rd.hover.colorTd = '#9BB3DA'; // set hover color
// save - after element is dropped
- rd.myhandler_dropped = function () {
+ rd.event.dropped = function () {
// get element position (method returns array with current and source positions - tableIndex, rowIndex and cellIndex)
- var pos = rd.get_position();
+ var pos = rd.getPosition();
// save table content
- send_request('ajax/db_save.php?p=' + rd.obj.id + '_' + pos.join('_'));
+ sendRequest('ajax/db_save.php?p=' + rd.obj.id + '_' + pos.join('_'));
};
// delete - after element is deleted
- rd.myhandler_deleted = function () {
+ rd.event.deleted = function () {
// get element position
- var pos = rd.get_position(),
+ var pos = rd.getPosition(),
row = pos[4],
col = pos[5];
// delete element
- send_request('ajax/db_delete.php?p=' + rd.obj.id + '_' + row + '_' + col);
+ sendRequest('ajax/db_delete.php?p=' + rd.obj.id + '_' + row + '_' + col);
};
// print message to the message line
- print_message('AJAX version');
+ printMessage('AJAX version');
};
@@ -75,7 +74,7 @@ initXMLHttpClient = function () {
// function sends AJAX request to the server (save or delete)
// input parameter is complete URL of service with query string
-send_request = function (url) {
+sendRequest = function (url) {
// open asynchronus request
request.open('GET', url, true);
// the onreadystatechange event is triggered every time the readyState changes
@@ -95,15 +94,15 @@ send_request = function (url) {
// print message
-print_message = function (message) {
+printMessage = function (message) {
document.getElementById('message').innerHTML = message;
};
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
1  example03/config.php
View
@@ -8,7 +8,6 @@
$db_user = 'enter_user_name';
$db_pwd = 'enter_user_password';
-
// reset record set to null ($rs is used in timetable function)
$rs = null;
102 example03/script.js
View
@@ -5,75 +5,66 @@
"use strict";
-var redips_init, // define redips_init variable
+var redipsInit, // define redipsInit variable
save, // save elements and their positions
report, // function shows subject occurring in timetable
- report_button, // show/hide report buttons
- show_all, // function show all subjects in timetable
- print_message, // print message
- div_nl; // node list of DIV elements in table2 (global variable needed in report() and visibility() function)
+ reportButton, // show/hide report buttons
+ showAll, // function show all subjects in timetable
+ printMessage, // print message
+ divNodeList; // node list of DIV elements in table2 (global variable needed in report() and visibility() function)
// redips initialization
-redips_init = function () {
+redipsInit = function () {
var rd = REDIPS.drag; // reference to the REDIPS.drag object
// initialization
rd.init();
- rd.drop_option = 'single'; // dragged elements can be placed to the empty cells only
- rd.hover.color_td = '#9BB3DA'; // set hover color
- rd.trash_ask = false; // do not ask on delete
- rd.clone_shiftKey = true; // elements could be cloned with pressed SHIFT key
+ // REDIPS.drag settings
+ rd.dropMode = 'single'; // dragged elements can be placed only to the empty cells
+ rd.hover.colorTd = '#9BB3DA'; // set hover color
+ rd.cloneKey.div = true; // enable cloning DIV elements with pressed SHIFT key
// prepare node list of DIV elements in table2
- div_nl = document.getElementById('table2').getElementsByTagName('div');
+ divNodeList = document.getElementById('table2').getElementsByTagName('div');
// show / hide report buttons (needed for dynamic version - with index.php)
- report_button();
- // after element is dropped, print message
- rd.myhandler_dropped = function () {
- var obj_old = rd.obj_old, // original object
- target_cell = rd.target_cell, // Target cell
- target_row = rd.target_cell.parentNode, // Target row
- marked_cell = rd.marked_cell, // marked cells
- mark_cname = rd.mark_cname, // name of marked cells
- i, obj_new, mark_found; // local variables
- // if checkbox is checked and original element is clone type then clone school subject to the week
- if (document.getElementById('week').checked === true && obj_old.className.indexOf('clone') > -1) {
+ reportButton();
+ // element is dropped
+ rd.event.dropped = function () {
+ var objOld = rd.objOld, // original object
+ targetCell = rd.td.target, // target cell
+ targetRow = targetCell.parentNode, // target row
+ i, objNew; // local variables
+ // if checkbox is checked and original element is of clone type then clone spread subjects to the week
+ if (document.getElementById('week').checked === true && objOld.className.indexOf('clone') > -1) {
// loop through table cells
- for (i = 0; i < target_row.cells.length; i++) {
- // skip if table cell is not empty (true for cell where element is currently dropped)
- if (target_row.cells[i].childNodes.length > 0) {
- continue;
- }
- // search for "mark" class name
- mark_found = target_row.cells[i].className.indexOf(mark_cname) > -1 ? true : false;
- // if current cell is marked and access type is 'deny' or current cell is not marked and access type is "allow"
- // then skip this table cell
- if ((mark_found === true && marked_cell === 'deny') || (mark_found === false && marked_cell === 'allow')) {
+ for (i = 0; i < targetRow.cells.length; i++) {
+ // skip cell if cell has some content (first column is not empty because it contains label)
+ if (targetRow.cells[i].childNodes.length > 0) {
continue;
}
// clone DIV element
- obj_new = rd.clone_div(obj_old);
+ objNew = rd.cloneObject(objOld);
// append to the table cell
- target_row.cells[i].appendChild(obj_new);
+ targetRow.cells[i].appendChild(objNew);
}
}
// print message only if target and source table cell differ
- if (rd.target_cell !== rd.source_cell) {
- print_message('Content has been changed!');
+ if (rd.td.target !== rd.td.source) {
+ printMessage('Content has been changed!');
}
// show / hide report buttons
- report_button();
+ reportButton();
};
// after element is deleted from the timetable, print message
- rd.myhandler_deleted = function () {
- print_message('Content has been deleted!');
+ rd.event.deleted = function () {
+ printMessage('Content has been deleted!');
// show / hide report buttons
- report_button();
+ reportButton();
};
// if any element is clicked, then make all subjects in timetable visible
- rd.myhandler_clicked = function () {
- show_all();
+ rd.event.clicked = function () {
+ showAll();
};
};
@@ -81,7 +72,7 @@ redips_init = function () {
// save elements and their positions
save = function () {
// scan timetable content
- var content = REDIPS.drag.save_content('table2');
+ var content = REDIPS.drag.saveContent('table2');
// and save content
window.location.href = 'db_save.php?' + content;
};
@@ -101,10 +92,10 @@ report = function (subject) {
num = 0, // number of found subject
str = ''; // result string
// show all elements
- show_all();
+ showAll();
// create array from node list (node list is global variable)
- for (i = 0; i < div_nl.length; i++) {
- div[i] = div_nl[i];
+ for (i = 0; i < divNodeList.length; i++) {
+ div[i] = divNodeList[i];
}
// sort div elements by the cellIndex (days in week) and rowIndex (hours)
div.sort(function (a, b) {
@@ -143,7 +134,7 @@ report = function (subject) {
// show/hide report buttons
-report_button = function () {
+reportButton = function () {
var id, // element id
i, // loop variable
count, // number of subjects in timetable
@@ -151,10 +142,10 @@ report_button = function () {
// prepare subjects
subject = {'en': 0, 'ph': 0, 'ma': 0, 'bi': 0, 'ch': 0, 'it': 0, 'ar': 0, 'hi': 0, 'et': 0};
// loop goes through all collected elements
- for (i = 0; i < div_nl.length; i++) {
+ for (i = 0; i < divNodeList.length; i++) {
// define only first two letters of ID
// (cloned elements have appended c1, c2, c3 ...)
- id = div_nl[i].id.substr(0, 2);
+ id = divNodeList[i].id.substr(0, 2);
// increase subject occurring
subject[id]++;
}
@@ -180,23 +171,24 @@ report_button = function () {
// print message
-print_message = function (message) {
+printMessage = function (message) {
document.getElementById('message').innerHTML = message;
};
// function show all subjects in timetable
-show_all = function () {
+showAll = function () {
var i; // loop variable
- for (i = 0; i < div_nl.length; i++) {
- div_nl[i].style.visibility = 'visible';
+ for (i = 0; i < divNodeList.length; i++) {
+ divNodeList[i].style.visibility = 'visible';
}
};
+
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
80 example04/script.js
View
@@ -6,93 +6,93 @@
var board = [[0, 0, 0], [0, 0, 0], [0, 0, 0]], // board array
xo = {x: 1, o: -1}, // define values for X and O elements
- redips_init, // define redips_init variable
- rd, // reference to the REDIPS.drag library
- divo, // reference to the O DIV element
+ redipsInit, // define redipsInit variable
+ rd, // reference to the REDIPS.drag library
+ divO, // reference to the O DIV element
// methods
- toggle_xo, // toggle X and O clone elements on the left
- check_board, // method checks board
- check_line; // method checks line (row, column or diagonal) for value 3 or -3
+ toggleXO, // toggle X and O clone elements on the left
+ checkBoard, // method checks board
+ checkLine; // method checks line (row, column or diagonal) for value 3 or -3
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// set reference to the REDIPS.drag library
rd = REDIPS.drag;
// initialization
rd.init();
// define border for disabled element (default is dotted)
- rd.border_disabled = 'none';
+ rd.style.borderDisabled = 'none';
// dragged elements can be placed to the empty cells only
- rd.drop_option = 'single';
- // set reference to the O div element (needed in toggle_xo() method)
- divo = document.getElementById('o');
+ rd.dropMode = 'single';
+ // set reference to the O div element (needed in toggleXO() method)
+ divO = document.getElementById('o');
// toggle X and O elements on the left side
- toggle_xo();
+ toggleXO();
// declare tasks after element is dropped
- rd.myhandler_dropped = function () {
- var obj = rd.obj, // current element (cloned element)
- obj_old = rd.obj_old, // previous element (this is clone element)
- tac = rd.target_cell; // target cell
+ rd.event.dropped = function () {
+ var obj = rd.obj, // current element (cloned element)
+ objOld = rd.objOld, // previous element (this is clone element)
+ tac = rd.td.target; // target cell
// disable dropped DIV element
- rd.enable_drag(false, obj.id);
+ rd.enableDrag(false, obj.id);
// toggle X and O elements on the left
- toggle_xo();
- // check board (obj_old.id can be 'x' or 'o')
- check_board(obj_old.id, tac.parentNode.rowIndex, tac.cellIndex);
+ toggleXO();
+ // check board (objOld.id can be 'x' or 'o')
+ checkBoard(objOld.id, tac.parentNode.rowIndex, tac.cellIndex);
};
};
// toggle X and O clone elements on the left
-toggle_xo = function () {
+toggleXO = function () {
// references to the X and O elements
- if (divo.redips.enabled) {
- rd.enable_drag(false, 'o');
- rd.enable_drag(true, 'x');
+ if (divO.redips.enabled) {
+ rd.enableDrag(false, 'o');
+ rd.enableDrag(true, 'x');
}
else {
- rd.enable_drag(true, 'o');
- rd.enable_drag(false, 'x');
+ rd.enableDrag(true, 'o');
+ rd.enableDrag(false, 'x');
}
};
// method checks board (KISS - keep it simple and stupid;)
-check_board = function (id, row_idx, cell_idx) {
+checkBoard = function (id, row_idx, cell_idx) {
// set value for current cell (1 or -1)
board[row_idx][cell_idx] = xo[id];
// test rows
- check_line(board[0][0] + board[0][1] + board[0][2]);
- check_line(board[1][0] + board[1][1] + board[1][2]);
- check_line(board[2][0] + board[2][1] + board[2][2]);
+ checkLine(board[0][0] + board[0][1] + board[0][2]);
+ checkLine(board[1][0] + board[1][1] + board[1][2]);
+ checkLine(board[2][0] + board[2][1] + board[2][2]);
// test columns
- check_line(board[0][0] + board[1][0] + board[2][0]);
- check_line(board[0][1] + board[1][1] + board[2][1]);
- check_line(board[0][2] + board[1][2] + board[2][2]);
+ checkLine(board[0][0] + board[1][0] + board[2][0]);
+ checkLine(board[0][1] + board[1][1] + board[2][1]);
+ checkLine(board[0][2] + board[1][2] + board[2][2]);
// test diagonals
- check_line(board[0][0] + board[1][1] + board[2][2]);
- check_line(board[0][2] + board[1][1] + board[2][0]);
+ checkLine(board[0][0] + board[1][1] + board[2][2]);
+ checkLine(board[0][2] + board[1][1] + board[2][0]);
};
// method checks line (row, column or diagonal) for value 3 or -3
-check_line = function (value) {
+checkLine = function (value) {
if (value === 3) {
document.getElementById('message').innerHTML = 'X is the Winner!';
- rd.enable_drag(false); // disable all drag elements
+ rd.enableDrag(false); // disable all drag elements
}
else if (value === -3) {
document.getElementById('message').innerHTML = 'O is the Winner!';
- rd.enable_drag(false); // disable all drag elements
+ rd.enableDrag(false); // disable all drag elements
}
};
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
8 example05/script.js
View
@@ -15,12 +15,12 @@ redipsInit = function () {
// initialization
rd.init();
// dragged elements can be placed to the empty cells only
- rd.drop_option = 'single';
+ rd.dropMode = 'single';
// elements could be cloned with pressed SHIFT key
- rd.clone_shiftKey = true;
+ rd.cloneKey.div = true;
// every change of current TD will have different background color
- rd.myhandler_changed = function () {
- rd.hover.color_td = rndColor();
+ rd.event.changed = function () {
+ rd.hover.colorTd = rndColor();
};
};
1  example05/style.css
View
@@ -23,6 +23,7 @@ body{
border: 2px dashed navy;
width: 710px;
height: 304px;
+ padding: 3px;
}
/* container for the left table */
18 example06/script.js
View
@@ -4,26 +4,26 @@
/* enable strict mode */
"use strict";
-// define redips_init variable
-var redips_init;
+// define redipsInit variable
+var redipsInit;
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// reference to the REDIPS.drag lib
var rd = REDIPS.drag;
// initialization
rd.init();
// dragged elements can be placed to the empty cells only
- rd.drop_option = 'single';
+ rd.dropMode = 'single';
// elements could be cloned with pressed SHIFT key
- rd.clone_shiftKey = true;
+ rd.cloneKey.div = true;
// define dropped handler
- rd.myhandler_dropped = function (target_cell) {
+ rd.event.dropped = function (targetCell) {
var tbl, // table reference of dropped element
id, // id of scrollable container
msg; // message
// find table of target cell
- tbl = rd.find_parent('TABLE', target_cell);
+ tbl = rd.findParent('TABLE', targetCell);
// test if table belongs to scrollable container
if (tbl.sca !== undefined) {
// every table has defined scrollable container (if table belongs to scrollable container)
@@ -54,8 +54,8 @@ redips_init = function () {
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
12 example07/script1.js
View
@@ -15,21 +15,21 @@ redips.init = function () {
// initialization
rd.init();
// set hover color
- rd.hover.color_td = '#9BB3DA';
+ rd.hover.colorTd = '#9BB3DA';
// single element per cell
- rd.drop_option = 'single';
+ rd.dropMode = 'single';
// define A and B source elements for the last row only (element ID and class name of the last row)
rd.only.div.a = 'last';
rd.only.div.b = 'last';
// A and B elements can't be placed to other table cells (this is default value)
rd.only.other = 'deny';
// after element is cloned define dropping rule for last row (only for clones of A or B element)
- rd.myhandler_cloned = function () {
+ rd.event.cloned = function () {
// define variables
- var cloned_id = rd.obj.id; // cloned id
+ var clonedId = rd.obj.id; // cloned id
// if cloned begins with 'a' or 'b' define dropping rule 'only' for last row
- if (cloned_id.substr(0, 1) === 'a' || cloned_id.substr(0, 1) === 'b') {
- rd.only.div[cloned_id] = 'last';
+ if (clonedId.substr(0, 1) === 'a' || clonedId.substr(0, 1) === 'b') {
+ rd.only.div[clonedId] = 'last';
}
};
// or cloned elements can be defined one by one
14 example07/script2.js
View
@@ -15,18 +15,16 @@ redips.init = function () {
// initialization
rd.init();
// set hover color
- rd.hover.color_td = '#9BB3DA';
+ rd.hover.colorTd = '#9BB3DA';
// single element per cell
- rd.drop_option = 'single';
- // do not ask on delete
- rd.trash_ask = false;
+ rd.dropMode = 'single';
// event handler invoked after element is cloned
- rd.myhandler_cloned = function () {
+ rd.event.cloned = function () {
// set id of cloned element
- var cloned_id = rd.obj.id;
+ var clonedId = rd.obj.id;
// if id of cloned element begins with "e" then make exception (allow DIV element to access cells with class name "mark")
- if (cloned_id.substr(0, 1) === 'e') {
- rd.mark.exception[cloned_id] = 'mark';
+ if (clonedId.substr(0, 1) === 'e') {
+ rd.mark.exception[clonedId] = 'mark';
}
};
};
10 example08/script.js
View
@@ -4,11 +4,11 @@
/* enable strict mode */
"use strict";
-// define redips_init variable
-var redips_init;
+// define redipsInit variable
+var redipsInit;
// redips initialization
-redips_init = function () {
+redipsInit = function () {
var rd = REDIPS.drag; // reference to the REDIPS.drag class
// DIV container initialization
rd.init('drag1');
@@ -20,8 +20,8 @@ redips_init = function () {
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
2  example09/index.html
View
@@ -58,7 +58,7 @@
Double click will return element to initial position
<br/><br/>
<!-- animation checkbox -->
- <input type="checkbox" class="checkbox" onclick="toggle_animation(this)" title="Enable / disable animation" checked=""/><span>Animation</span>
+ <input type="checkbox" class="checkbox" onclick="toggleAnimation(this)" title="Enable / disable animation" checked=""/><span>Shift animation</span>
</div>
</div><!-- main container -->
</body>
37 example09/script.js
View
@@ -5,39 +5,39 @@
"use strict";
-var redips_init, // define redips_init variable
- toggle_animation, // enable / disable animation
- start_positions, // remember initial positions of DIV elements
+var redipsInit, // define redipsInit variable
+ toggleAnimation, // enable / disable animation
+ startPositions, // remember initial positions of DIV elements
pos = {}, // initial positions of DIV elements
rd = REDIPS.drag; // reference to the REDIPS.drag lib
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// initialization
rd.init();
// enable animation on shifted elements
- rd.animation_shift = true;
+ rd.animation.shift = true;
// save initial DIV positions to "pos" object (it should go after initialization)
- start_positions();
+ startPositions();
// in a moment when DIV element is moved, set drop_option property (shift or single)
- rd.myhandler_moved = function () {
+ rd.event.moved = function () {
// find parent table of moved element
- var tbl = rd.find_parent('TABLE', rd.obj);
+ var tbl = rd.findParent('TABLE', rd.obj);
// if table id is table1
if (tbl.id === 'table1') {
- rd.drop_option = 'shift';
+ rd.dropMode = 'shift';
}
else {
- rd.drop_option = 'single';
+ rd.dropMode = 'single';
}
};
// when DIV element is double clicked return it to the initial position
- rd.myhandler_dblclicked = function () {
+ rd.event.dblClicked = function () {
// set dblclicked DIV id
var id = rd.obj.id;
// move DIV element to initial position
- rd.move_object({
+ rd.moveObject({
id: id, // DIV element id
target: pos[id] // target position
});
@@ -46,7 +46,8 @@ redips_init = function () {
// function scans DIV elements and saves their positions to the "pos" object
-start_positions = function () {
+startPositions = function () {
+ // define local varialbles
var divs, id, i, position;
// collect DIV elements from dragging area
divs = document.getElementById('drag').getElementsByTagName('div');
@@ -57,7 +58,7 @@ start_positions = function () {
// if element id is defined, then save element position
if (id) {
// set element position
- position = rd.get_position(divs[i]);
+ position = rd.getPosition(divs[i]);
// if div has position (filter obj_new)
if (position.length > 0) {
pos[id] = position;
@@ -68,15 +69,15 @@ start_positions = function () {
// enable / disable animation
-toggle_animation = function (chk) {
- REDIPS.drag.animation_shift = chk.checked;
+toggleAnimation = function (chk) {
+ REDIPS.drag.animation.shift = chk.checked;
};
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
16 example10/script.js
View
@@ -5,24 +5,24 @@
"use strict";
// define redips_init variable
-var redips_init;
+var redipsInit;
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// reference to the REDIPS.drag lib
var rd = REDIPS.drag;
// initialization
rd.init();
- // dragged elements can be placed to the empty cells only
- rd.drop_option = 'single';
- // elements could be cloned with pressed SHIFT key
- rd.clone_shiftKey = true;
+ // dragged elements can be placed only to the empty cells
+ rd.dropMode = 'single';
+ // enable cloning DIV elements with pressed SHIFT key
+ rd.cloneKey.div = true;
};
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
14 example11/script.js
View
@@ -12,27 +12,25 @@ redips.init = function () {
// reference to the REDIPS.drag object
var rd = REDIPS.drag;
// define border style (this should go before init() method)
- rd.border = 'none';
+ rd.style.borderEnabled = 'none';
// initialization
rd.init();
// set hover color
- rd.hover.color_td = '#FFE885';
+ rd.hover.colorTd = '#FFE885';
// DIV elements can be dropped to the empty cells only
- rd.drop_option = 'single';
- // do not ask on delete
- rd.trash_ask = false;
+ rd.dropMode = 'single';
// DIV element was clicked - enable / disable tables
- rd.myhandler_clicked = function () {
+ rd.event.clicked = function () {
// search for table inside DIV element
var tbl = rd.obj.getElementsByTagName('TABLE');
// if DIV element contains table then disable all mini tables
// it is not allowed to drop table within another table
if (tbl.length > 0) {
- rd.enable_table(false, 'mini');
+ rd.enableTable(false, 'mini');
}
// clicked element doesn't contain any table - enable all "mini" tables
else {
- rd.enable_table(true, 'mini');
+ rd.enableTable(true, 'mini');
}
};
};
18 example12/script.js
View
@@ -4,23 +4,23 @@
/* enable strict mode */
"use strict";
-// define redips_init variable
-var redips_init;
+// define redipsInit variable
+var redipsInit;
// redips initialization
-redips_init = function () {
+redipsInit = function () {
var rd = REDIPS.drag, // reference to the REDIPS.drag class
- div_drag = document.getElementById('drag'); // reference to the drag region
+ divDrag = document.getElementById('drag'); // reference to the drag region
// DIV container initialization
rd.init();
// this function (event handler) is called after element is dropped
- rd.myhandler_dropped = function () {
+ rd.event.dropped = function () {
var div1, // DIV elements inside DIV id="drag" (collection)
div2 = [], // references of DIV elements prepared from collection
cb, i, j, // checkbox and loop variables
id; // element Id
// collect DIV elements from drag region
- div1 = div_drag.getElementsByTagName('div');
+ div1 = divDrag.getElementsByTagName('div');
// loop through collected DIV elements
for (i = 0, j = 0; i < div1.length; i++) {
// locate checkbox inside DIV element
@@ -41,7 +41,7 @@ redips_init = function () {
// define id of element to move
id = div2[i].id;
// element will be moved to the dropped table cell
- rd.move_object({id: id});
+ rd.moveObject({id: id});
// try to comment upper line and uncomment this line (elements will be relocated without animation)
//rd.target_cell.appendChild(div2[i]);
}
@@ -51,8 +51,8 @@ redips_init = function () {
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
30 example13/script.js
View
@@ -4,33 +4,33 @@
/* enable strict mode */
"use strict";
-var redips_init, // define redips_init variable
- set_hover_color, // set hover color method
- rd; // reference to the REDIPS.drag library
+var redipsInit, // define redipsInit variable
+ setHoverColor, // set hover color method
+ rd; // reference to the REDIPS.drag library
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// set reference to the REDIPS.drag library
rd = REDIPS.drag;
// initialization
rd.init();
- // elements could be cloned with pressed SHIFT key
- rd.clone_shiftKey = true;
+ // enable cloning DIV elements with pressed SHIFT key
+ rd.cloneKey.div = true;
// handler clicked - set hover color
- rd.myhandler_clicked = function (current_cell) {
- set_hover_color(current_cell);
+ rd.event.clicked = function (currentCell) {
+ setHoverColor(currentCell);
};
// handler changed - set hover color
- rd.myhandler_changed = function (current_cell) {
- set_hover_color(current_cell);
+ rd.event.changed = function (currentCell) {
+ setHoverColor(currentCell);
};
};
// set hover color
-set_hover_color = function (cell) {
+setHoverColor = function (cell) {
var color,
- tbl = rd.find_parent('TABLE', cell);
+ tbl = rd.findParent('TABLE', cell);
// set hover color depending in nested level
switch (tbl.redips.nestedLevel) {
// "ground" level table
@@ -51,14 +51,14 @@ set_hover_color = function (cell) {
break;
}
// set hover color
- rd.hover.color_td = color;
+ rd.hover.colorTd = color;
};
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
6 example14/index.html
View
@@ -14,11 +14,11 @@
<!-- tables inside this DIV could have draggable content -->
<div id="drag">
<!-- "shift" drop option with animation checkbox -->
- <input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="shift" title="Shift table content" checked="true"/> Shift
- (<input type="checkbox" class="checkbox" onclick="toggle_animation(this)" title="Enable / disable animation" checked=""/>with animation)
+ <input type="radio" name="drop_option" class="checkbox" onclick="setDropMode(this)" value="shift" title="Shift table content" checked="true"/> Shift
+ (<input type="checkbox" class="checkbox" onclick="toggleAnimation(this)" title="Enable / disable animation" checked=""/>with animation)
<br/>
<!-- "switching" drop option -->
- <input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="switching" title="Switching content continuously"/> Switching
+ <input type="radio" name="drop_option" class="checkbox" onclick="setDropMode(this)" value="switching" title="Switching content continuously"/> Switching
<!-- table -->
<table id="table1">
<colgroup>
26 example14/script.js
View
@@ -5,39 +5,39 @@
"use strict";
-var redips_init, // define redips_init variable
- toggle_animation, // animation for shift option
- set_drop_option; // function sets drop_option parameter
+var redipsInit, // define redipsInit variable
+ toggleAnimation,// animation for shift option
+ setDropMode; // function sets dropMode parameter
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// reference to the REDIPS.drag lib
var rd = REDIPS.drag;
// initialization
rd.init();
// set shift drop option
- rd.drop_option = 'shift';
- // enable animation on shifted elements
- rd.animation_shift = true;
+ rd.dropMode = 'shift';
+ // enable animation for shifted elements
+ rd.animation.shift = true;
};
// function sets drop_option parameter
-set_drop_option = function (radio_button) {
- REDIPS.drag.drop_option = radio_button.value;
+setDropMode = function (radioButton) {
+ REDIPS.drag.dropMode = radioButton.value;
};
// enable / disable animation
-toggle_animation = function (chk) {
- REDIPS.drag.animation_shift = chk.checked;
+toggleAnimation = function (chk) {
+ REDIPS.drag.animation.shift = chk.checked;
};
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
49 example15/script.js
View
@@ -4,89 +4,90 @@
/* enable strict mode */
"use strict";
-// define redips_init variable
-var redips_init;
+// define redipsInit variable
+var redipsInit;
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// reference to the REDIPS.drag library and message line
var rd = REDIPS.drag,
msg;
// initialization
rd.init();
// set hover color for TD and TR
- rd.hover.color_td = '#FFCFAE';
- rd.hover.color_tr = '#9BB3DA';
+ rd.hover.colorTd = '#FFCFAE';
+ rd.hover.colorTr = '#9BB3DA';
// set hover border for current TD and TR
- rd.hover.border_td = '2px solid #32568E';
- rd.hover.border_tr = '2px solid #32568E';
+ rd.hover.borderTd = '2px solid #32568E';
+ rd.hover.borderTr = '2px solid #32568E';
// drop row after highlighted row (if row is dropped to other tables)
// possible values are "before" and "after"
- rd.row_position = 'after';
+ rd.rowPosition = 'after';
// row was clicked - event handler
- rd.myhandler_row_clicked = function () {
+ rd.event.rowClicked = function () {
// set current element (this is clicked TR)
var el = rd.obj;
// find parent table
- el = rd.find_parent('TABLE', el);
+ el = rd.findParent('TABLE', el);
// every table has only one SPAN element to display messages
msg = el.getElementsByTagName('span')[0];
// display message
msg.innerHTML = 'Clicked';
};
// row was moved - event handler
- rd.myhandler_row_moved = function () {
+ rd.event.rowMoved = function () {
// set opacity for moved row
// rd.obj is reference of cloned row (mini table)
- rd.row_opacity(rd.obj, 85);
+ rd.rowOpacity(rd.obj, 85);
// set opacity for source row and change source row background color
- // obj.obj_old is reference of source row
- rd.row_opacity(rd.obj_old, 20, 'White');
+ // rd.objOld is reference of source row
+ rd.rowOpacity(rd.objOld, 20, 'White');
// display message
msg.innerHTML = 'Moved';
};
// row was not moved - event handler
- rd.myhandler_row_notmoved = function () {
+ rd.event.rowNotMoved = function () {
msg.innerHTML = 'Not moved';
};
// row was dropped - event handler
- rd.myhandler_row_dropped = function () {
+ rd.event.rowDropped = function () {
// display message
msg.innerHTML = 'Dropped';
};
// row was dropped to the source - event handler
// mini table (cloned row) will be removed and source row should return to original state
- rd.myhandler_row_dropped_source = function () {
+ rd.event.rowDroppedSource = function () {
// make source row completely visible (no opacity)
- rd.row_opacity(rd.obj_old, 100);
+ rd.rowOpacity(rd.objOld, 100);
// display message
msg.innerHTML = 'Dropped to the source';
};
/*
// how to cancel row drop to the table
- rd.myhandler_row_dropped_before = function () {
+ rd.event.rowDroppedBefore = function () {
//
// JS logic
//
// return source row to its original state
- rd.row_opacity(rd.obj_old, 100);
+ rd.rowOpacity(rd.objOld, 100);
// cancel row drop
return false;
}
*/
// row position was changed - event handler
- rd.myhandler_row_changed = function () {
+ rd.event.rowChanged = function () {
// get target and source position (method returns positions as array)
- var pos = rd.get_position();
+ var pos = rd.getPosition();
// display current table and current row
msg.innerHTML = 'Changed: ' + pos[0] + ' ' + pos[1];
};
};
+
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
80 example16/script.js
View
@@ -24,14 +24,14 @@ redips.init = function () {
var rd = REDIPS.drag;
// set script configuration
redips.configuration();
- // set reference to the hover_div
- redips.hover_div = document.getElementById('hover_div');
+ // set reference to the hoverDiv
+ redips.hoverDiv = document.getElementById('hover_div');
// initially hide all tables in right container except first table
- redips.hide_tables();
+ redips.hideTables();
// set class="single" to the table cells question table (left table)
- redips.single_content();
+ redips.singleContent();
// set onmouseover & onmouseout to all div elements inside DIV id="drag"
- redips.set_events();
+ redips.setEvents();
// create XMLHttp request object
redips.request = redips.initXMLHttpClient();
// set fixed position for the left container
@@ -39,45 +39,45 @@ redips.init = function () {
// initialization
rd.init();
// drop option is switch - content can be exchanged
- rd.drop_option = 'switch';
+ rd.dropMode = 'switch';
// in a moment when dragging starts, remove mouseover event and hide hover tooltip
- rd.myhandler_moved = function () {
- REDIPS.event.remove(rd.obj, 'mouseover', redips.show_tooltip);
- redips.hide_tooltip();
+ rd.event.moved = function () {
+ REDIPS.event.remove(rd.obj, 'mouseover', redips.showTooltip);
+ redips.hideTooltip();
};
// enable cloning option only for DIV elements in right table
- rd.myhandler_clicked = function () {
+ rd.event.clicked = function () {
// find container id
- var cid = redips.find_container(rd.obj);
+ var cid = redips.findContainer(rd.obj);
// set cloning option with shiftKey only for right DIV container
if (cid === redips.right) {
- rd.clone_shiftKey = true;
+ rd.cloneKey.div = true;
}
else {
- rd.clone_shiftKey = false;
+ rd.cloneKey.div = false;
}
// set hover color for original DIV elements and for cloned DIV elements
if (rd.obj.className.indexOf('clnd') === -1) {
- rd.hover.color_td = redips.hover1;
+ rd.hover.colorTd = redips.hover1;
}
else {
- rd.hover.color_td = redips.hover2;
+ rd.hover.colorTd = redips.hover2;
}
};
// event handler called before DIV element is dropped to the table
// in case when DIV element changes location from left to right DIV container or vice versa
- rd.myhandler_dropped_before = function (target_cell) {
+ rd.event.droppedBefore = function (targetCell) {
var id = rd.obj.id, // define id of DIV element
tcid, // target container id
scid; // source container id
// find target container id and source container id
- tcid = redips.find_container(target_cell);
- scid = redips.find_container(rd.source_cell);
+ tcid = redips.findContainer(targetCell);
+ scid = redips.findContainer(rd.td.source);
// if element is dropped from question table to the one of right tables
// (right tables doesn't have id)
if (scid === redips.left && tcid === redips.right) {
// send request (input parameter is object reference)
- redips.send_request(rd.obj, id);
+ redips.sendRequest(rd.obj, id);
rd.obj.style.width = redips.width; // width parameter
rd.obj.style.height = '';
}
@@ -89,10 +89,10 @@ redips.init = function () {
}
};
// after DIV element is dropped,
- rd.myhandler_dropped = function (target_cell) {
+ rd.event.dropped = function (targetCell) {
// target container id
- var tcid = redips.find_container(target_cell);
- // target container is defined in myhandler_dropped_before()
+ var tcid = redips.findContainer(targetCell);
+ // target container is defined in event.droppedBefore()
if (tcid === redips.left) {
// if cloned element is dropped to the left table then delete it
if (rd.obj.className.indexOf('clnd') !== -1) {
@@ -101,18 +101,18 @@ redips.init = function () {
}
// else return mouseover event (needed for tooltip in left table)
else {
- REDIPS.event.add(rd.obj, 'mouseover', redips.show_tooltip);
+ REDIPS.event.add(rd.obj, 'mouseover', redips.showTooltip);
}
}
};
// add "clnd" (cloned) class name to the cloned elements
// needed to delete cloned elements in case when dropped to the left table
- rd.myhandler_cloned = function () {
+ rd.event.cloned = function () {
if (rd.obj.className.indexOf('clnd') === -1) {
rd.obj.className += ' clnd';
}
// set hover color for cloned elements
- rd.hover.color_td = redips.hover2;
+ rd.hover.colorTd = redips.hover2;
};
};
@@ -147,7 +147,7 @@ redips.initXMLHttpClient = function () {
// send request to the server and display response in obj.innerHTML
-redips.send_request = function (obj, id) {
+redips.sendRequest = function (obj, id) {
// open asynchronus request
redips.request.open('GET', redips.content_url + '?id=' + id, true);
// the onreadystatechange event is triggered every time the readyState changes
@@ -168,7 +168,7 @@ redips.send_request = function (obj, id) {
// show tooltip (when mouse is over element of question table)
-redips.show_tooltip = function (e) {
+redips.showTooltip = function (e) {
var element = e.target || e.srcElement, // define element from the fired event
id = element.id, // id of the DIV element is question ID (written as inner HTML)
box = element, // remember box object (needed for offset calculation)
@@ -187,18 +187,18 @@ redips.show_tooltip = function (e) {
}
while (box && box.nodeName !== 'BODY');
// set popup near to the element
- redips.hover_div.style.top = (oTop + 22) + 'px';
- redips.hover_div.style.left = oLeft + 'px';
+ redips.hoverDiv.style.top = (oTop + 22) + 'px';
+ redips.hoverDiv.style.left = oLeft + 'px';
// send request (input parameter is object reference)
- redips.send_request(redips.hover_div, id);
+ redips.sendRequest(redips.hoverDiv, id);
// set visibility
- redips.hover_div.style.visibility = 'visible';
+ redips.hoverDiv.style.visibility = 'visible';
};
// hide tooltip
-redips.hide_tooltip = function () {
- redips.hover_div.style.visibility = 'hidden';
+redips.hideTooltip = function () {
+ redips.hoverDiv.style.visibility = 'hidden';
};
@@ -218,7 +218,7 @@ redips.toggle = function (btn, page_id) {
// set onmouseover & onmouseout to all div elements inside DIV id="drag"
-redips.set_events = function () {
+redips.setEvents = function () {
var regex_drag = /\bdrag\b/i, // regular expression to search "drag" class name
div, i;
// collect all div elements inside DIV id="drag"
@@ -226,8 +226,8 @@ redips.set_events = function () {
for (i = 0; i < div.length; i++) {
// only DIV elements that contains "drag" in class name
if (regex_drag.test(div[i].className)) {
- REDIPS.event.add(div[i], 'mouseover', redips.show_tooltip);
- REDIPS.event.add(div[i], 'mouseout', redips.hide_tooltip);
+ REDIPS.event.add(div[i], 'mouseover', redips.showTooltip);
+ REDIPS.event.add(div[i], 'mouseout', redips.hideTooltip);
}
}
// remember size (width and height) of DIV elements in question table
@@ -239,7 +239,7 @@ redips.set_events = function () {
// initially hide all page containers but first page container
// tables are closed in P block - page container
-redips.hide_tables = function () {
+redips.hideTables = function () {
var div, i;
// collect page containers in right DIV container
div = document.getElementById(redips.right).getElementsByTagName('div');
@@ -251,7 +251,7 @@ redips.hide_tables = function () {
// set class="single" to all cells in question table (left table)
-redips.single_content = function () {
+redips.singleContent = function () {
var cell, i;
// collect table cells from left table
cell = document.getElementById('table1').getElementsByTagName('td');
@@ -262,8 +262,9 @@ redips.single_content = function () {
}
};
+
// find container and return container id
-redips.find_container = function (c) {
+redips.findContainer = function (c) {
// loop up until found target DIV container
while (c && c.id !== redips.left && c.id !== redips.right) {
c = c.parentNode;
@@ -272,6 +273,7 @@ redips.find_container = function (c) {
return c.id;
};
+
// add onload event listener
if (window.addEventListener) {
window.addEventListener('load', redips.init, false);
144 example17/script.js
View
@@ -8,84 +8,84 @@
// properties
var rd = REDIPS.drag, // reference to the REDIPS.drag library
loc = {}, // initial locations of DIV elements
- lock = 0, // needed for enable/disable element synchronization (used in enable_rows)
+ lock = 0, // needed for enable/disable element synchronization (used in enableRows)
// methods
- redips_init, // redips initialization
- start_positions, // remember a start positions of DIV elements
+ redipsInit, // redips initialization
+ startPositions, // remember a start positions of DIV elements
reset, // returns elements to their initial positions
shuffle, // shuffles (randomizes the order of the elements on tables)
- enable_elements, // enables/disables elements on page
- enable_rows, // enables/disables rows (row handler - blue circles) on page
- enable_buttons, // enables/disables buttons (called from enable elements and enable_rows)
- get_id; // returns id of element in opposite table
+ enableElements, // enables/disables elements on page
+ enableRows, // enables/disables rows (row handler - blue circles) on page
+ enableButtons, // enables/disables buttons (called from enable elements and enableRows)
+ getId; // returns id of element in opposite table
// redips initialization
-redips_init = function () {
- rd.border_disabled = 'solid'; // border style for disabled element will not be changed
- rd.opacity_disabled = 70; // disabled elements will have opacity effect
- rd.animation_pause = 40; // set animation loop pause
+redipsInit = function () {
+ rd.style.borderDisabled = 'solid'; // border style for disabled element will not be changed
+ rd.style.opacityDisabled = 70; // disabled elements will have opacity effect
+ rd.animation.pause = 40; // set animation loop pause
// initialize dragging containers (each table is placed in separate container)
rd.init('drag1');
rd.init('drag2');
// elements can be dropped only to the empty table cells
- rd.drop_option = 'single';
+ rd.dropMode = 'single';
// set hover color for TD and TR
- rd.hover.color_td = '#FFCFAE';
- rd.hover.color_tr = '#9BB3DA';
+ rd.hover.colorTd = '#FFCFAE';
+ rd.hover.colorTr = '#9BB3DA';
// save locations of all DIV elements to the "loc" object (it should go after initialization)
- start_positions();
+ startPositions();
// row was moved - event handler
- rd.myhandler_row_moved = function () {
+ rd.event.rowMoved = function () {
// set opacity for moved row (rd.obj is reference of cloned row - mini table)
- rd.row_opacity(rd.obj, 85);
+ rd.rowOpacity(rd.obj, 85);
// set opacity for source row and change source row background color (obj.obj_old is reference of source row)
- rd.row_opacity(rd.obj_old, 20, 'white');
+ rd.rowOpacity(rd.objOld, 20, 'white');
};
// row was dropped - move row in opposite table
- rd.myhandler_row_dropped = function () {
+ rd.event.rowDropped = function () {
// id of element from opposite table (rd.obj_old is source row, redips.div is reference to the <div class="drag row">)
- var id_new = get_id(rd.obj_old.redips.div),
- // returned value from move_object method
+ var idNew = getId(rd.objOld.redips.div),
+ // returned value from moveObject method
row = [];
- // disable elements in both containers ("enable_elements" is local function)
- enable_elements(false);
+ // disable elements in both containers ("enableElements" is local function)
+ enableElements(false);
// move row in other table (method returns reference to the mini table and source row)
- // after animation is finished, callback function "enable_elements" will enable elements in both containers
- row = rd.move_object({
- id: id_new,
+ // after animation is finished, callback function "enableElements" will enable elements in both containers
+ row = rd.moveObject({
+ id: idNew,
callback: function () {
- enable_elements(true);
+ enableElements(true);
}
});
// set opacity for moved row (row[0] is reference of cloned row - mini table)
- rd.row_opacity(row[0], 85);
+ rd.rowOpacity(row[0], 85);
// set opacity for source row and change source row background color (row[1] is reference of source row)
- rd.row_opacity(row[1], 20, 'White');
+ rd.rowOpacity(row[1], 20, 'White');
};
// row was dropped to the source row (mini table - cloned row, will be removed and source row will return to original state)
- rd.myhandler_row_dropped_source = function () {
+ rd.event.rowDroppedSource = function () {
// make source row completely visible (no opacity)
- rd.row_opacity(rd.obj_old, 100);
+ rd.rowOpacity(rd.objOld, 100);
// enable both containers
- enable_elements(true);
+ enableElements(true);
};
// element was dropped - move element in opposite table
- rd.myhandler_dropped = function () {
+ rd.event.dropped = function () {
var obj = rd.obj, // reference to the current element
- id_new = get_id(obj); // id of element from opposite table
+ idNew = getId(obj); // id of element from opposite table
// disable current element
- rd.enable_drag(false, obj);
- // disable row handlers - blue circles ("enable_rows" is a local function)
- enable_rows(false);
- // element from opposite table with id_new will be moved to the dropped table cell
+ rd.enableDrag(false, obj);
+ // disable row handlers - blue circles ("enableRows" is a local function)
+ enableRows(false);
+ // element from opposite table with idNew will be moved to the dropped table cell
// tableIndex for both tables is 0 because each table is closed in separate dragging container
// after animation is finished, callback function will enable previously disabled element and row handlers (blue circles)
- rd.move_object({
- id: id_new,
+ rd.moveObject({
+ id: idNew,
callback: function () {
- rd.enable_drag(true, obj);
- enable_rows(true);
+ rd.enableDrag(true, obj);
+ enableRows(true);
}
});
};
@@ -95,7 +95,7 @@ redips_init = function () {
/**
* Function scans all DIV elements and save their positions to the pos object.
*/
-start_positions = function () {
+startPositions = function () {
var divs = [], id, i, j, position;
// collect DIV elements from both dragging area
divs[0] = document.getElementById('drag1').getElementsByTagName('div');
@@ -109,7 +109,7 @@ start_positions = function () {
// if element id is defined, then save element position
if (id) {
// set element position
- position = rd.get_position(divs[i][j]);
+ position = rd.getPosition(divs[i][j]);
// if div has position (filter obj_new)
if (position.length > 0) {
loc[id] = position;
@@ -132,16 +132,16 @@ reset = function () {
// other DIV elements are row handlers
if (loc.hasOwnProperty(id) && id.substring(0, 1) === 'd') {
// get current position of element
- pos1 = rd.get_position(id);
+ pos1 = rd.getPosition(id);
// if current position is different then initial position the return element to the initial position
if (loc[id].toString() !== pos1.toString()) {
// disable row handlers - blue circles
- enable_rows(false);
+ enableRows(false);
// move object to the initial position
- rd.move_object({
+ rd.moveObject({
id: id, // id of object to move
target: loc[id], // target position
- callback: enable_rows // callback function after moving is finished
+ callback: enableRows // callback function after moving is finished
});
}
}
@@ -157,7 +157,7 @@ shuffle = function () {
rowIndex, // row index (random number from 1 to 7)
cellIndex, // cell index (random number from 1 to 5)
rnd, // random position
- pos, // current position as array (returned from get_position method)
+ pos, // current position as array (returned from getPosition method)
pos1, // current position in format rowIndex + '_' + cellIndex
arr = []; // generated positions will be saved in array (to avoid duplicates)
// loop goes through every "id" in loc object
@@ -166,7 +166,7 @@ shuffle = function () {
// if element id begins with "d" (other DIV elements are row handlers) and
// if id of element ends with "1" (only elements from first table)
if (loc.hasOwnProperty(id) && id.substring(0, 1) === 'd' && id.charAt(id.length - 1) === '1') {
- pos = rd.get_position(id); // set current position for DIV element with defined id
+ pos = rd.getPosition(id); // set current position for DIV element with defined id
pos1 = pos[1] + '_' + pos[2]; // prepare current position in format rowIndex + '_' + cellIndex
// generate random position (must be unique and different then current position)
do {
@@ -177,20 +177,20 @@ shuffle = function () {
// push generated value to the array (to avoid duplicate positions)
arr.push(rnd);
// disable row handlers - blue circles in first column
- enable_rows(false);
+ enableRows(false);
// move object to the random position in table1
- rd.move_object({
+ rd.moveObject({
id: id, // id of object to move
target: [0, rowIndex, cellIndex], // target position (table index is 0 because of separate drag container)
- callback: enable_rows // callback function after moving is finished
+ callback: enableRows // callback function after moving is finished
});
// disable row handlers - blue circles in first column
- enable_rows(false);
+ enableRows(false);
// move object to the random position in table2
- rd.move_object({
+ rd.moveObject({
id: id.slice(0, -1) + '2', // id of object from table2
target: [0, rowIndex, cellIndex], // target position (table index is 0 because of separate drag container)
- callback: enable_rows // callback function after moving is finished
+ callback: enableRows // callback function after moving is finished
});
}
}
@@ -203,13 +203,13 @@ shuffle = function () {
* @param {HTMLElement} DIV element (in row dragging context "el" is rowhandler of source row)
* @return {String} Id of element in opposite table.
*/
-get_id = function (el) {
+getId = function (el) {
var ri = {1: 2, 2: 1}, // needed for reverse 1 -> 2 or 2 -> 1
id = el.id, // define DIV id or mini table
lc = id.charAt(id.length - 1), // last character of id that should be reversed (1 -> 2 or 2 -> 1)
- id_new = id.slice(0, -1) + ri[lc]; // id of element from opposite table
+ idNew = id.slice(0, -1) + ri[lc]; // id of element from opposite table
// return new id
- return id_new;
+ return idNew;
};
@@ -217,11 +217,11 @@ get_id = function (el) {
* Function enables/disables buttons and all elements on page. In case when user drops row, elements (and rows) are disabled until animation finishes.
* @param {Boolean} Flag enable or disable elements in both dragging containers.
*/
-enable_elements = function (flag) {
- rd.enable_drag(flag, 'drag1', 'subtree');
- rd.enable_drag(flag, 'drag2', 'subtree');
+enableElements = function (flag) {
+ rd.enableDrag(flag, 'drag1', 'subtree');
+ rd.enableDrag(flag, 'drag2', 'subtree');
// enable/disable buttons "Reset" and "Shuffle"
- enable_buttons(flag);
+ enableButtons(flag);
};
@@ -230,9 +230,9 @@ enable_elements = function (flag) {
* "lock" variable is used for animation synchronization.
* @param {Boolean} Flag enable or disable rows in both dragging containers.
*/
-enable_rows = function (flag) {
+enableRows = function (flag) {
var id;
- // if input parameter is not boolean type, then enable_rows is called from callback function
+ // if input parameter is not boolean type, then enableRows is called from callback function
// callback function sends reference of moved element
if (typeof(flag) !== 'boolean') {
flag = true;
@@ -246,17 +246,17 @@ enable_rows = function (flag) {
// set lock variable to 0 (just to be sure - it should be 0 anyway)
lock = 0;
// enable / disable buttons "Reset" and "Shuffle"
- enable_buttons(flag);
+ enableButtons(flag);
// loop goes through every "id" in loc object
for (id in loc) {
// test the property (filter properties of the prototype) and if element id begins with "r"
// other DIV elements are DIV elements
if (loc.hasOwnProperty(id) && id.substring(0, 1) === 'r') {
- rd.enable_drag(flag, id);
+ rd.enableDrag(flag, id);
}
}
}
- // after element is dropped, it will be disabled first (so this code is executed first in enable_rows() function)
+ // after element is dropped, it will be disabled first (so this code is executed first in enableRows() function)
if (!flag) {
lock++;
}
@@ -264,10 +264,10 @@ enable_rows = function (flag) {
/**
- * Function enables/disables buttons (it's called from enable_elements() and enable_rows() functions)
+ * Function enables/disables buttons (it's called from enableElements() and enableRows() functions)
* @param {Boolean} Flag enable or disable buttons.
*/
-enable_buttons = function (flag) {
+enableButtons = function (flag) {
var buttons, i;
// collect buttons from buttons area
buttons = document.getElementById('buttons').getElementsByTagName('input');
@@ -294,8 +294,8 @@ if (!Array.prototype.indexOf) {
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
4 example18/index.html
View
@@ -18,8 +18,8 @@
<!-- buttons -->
<div id="buttons">
<input type="button" value="Move" class="button" id="btn_move" onclick="redips.move()"/><span></span> <!-- empty span element is needed for applying right margin in CSS -->
- <input type="checkbox" class="checkbox" onclick="redips.toggle_clone(this)" title="Clone DIV element"/><span class="message_line">Clone</span>
- <input type="checkbox" class="checkbox" onclick="redips.toggle_overwrite(this)" title="Overwrite content"/><span class="message_line">Overwrite</span>
+ <input type="checkbox" class="checkbox" onclick="redips.toggleClone(this)" title="Clone DIV element"/><span class="message_line">Clone</span>
+ <input type="checkbox" class="checkbox" onclick="redips.toggleOverwrite(this)" title="Overwrite content"/><span class="message_line">Overwrite</span>
</div>
<!-- drag region -->
<div id="drag">
24 example18/script.js
View
@@ -17,16 +17,16 @@ redips.init = function () {
// script configuration
redips.clone = false; // set false for "clone" checkbox
redips.overwrite = false; // set false to "overwrite" checkbox
- redips.button = document.getElementById('btn_move'); // set button reference (needed in redips.button_enable() method)
+ redips.button = document.getElementById('btn_move'); // set button reference (needed in redips.buttonEnable() method)
// initialization
rd.init();
// animation pause (lower values mean the animation plays faster)
- rd.animation_pause = 40;
+ rd.animation.pause = 40;
// animation step (minimum is 1)
- rd.animation_step = 2;
+ rd.animation.step = 2;
// event handler invoked after DIV element is cloned - called from REDIPS.drag.move_object()
- rd.myhandler_cloned = function (div_cloned) {
- div_cloned.style.borderColor = 'LightBlue';
+ rd.event.cloned = function (clonedDiv) {
+ clonedDiv.style.borderColor = 'LightBlue';
};
};
@@ -40,21 +40,21 @@ redips.move = function () {
cellIndex, // cell index (random number from 0 to 6)
pos; // current position as array (returned from get_position method)
// set current position for DIV element with defined id
- pos = REDIPS.drag.get_position(id);
+ pos = REDIPS.drag.getPosition(id);
// generate random position (must be different then current position)
do {
rowIndex = Math.floor(Math.random() * 7); // from 0 to 6
cellIndex = Math.floor(Math.random() * 7); // from 0 to 6
} while (pos[1] === rowIndex && pos[2] === cellIndex);
// disable "Move" button
- redips.button_enable(false);
+ redips.buttonEnable(false);
// move object to the random position
- REDIPS.drag.move_object({
+ REDIPS.drag.moveObject({
id: id, // id of object to move
clone: redips.clone, // clone option (if set to true then DIV element will be cloned)
overwrite: redips.overwrite, // overwrite target cell (if set to true, then content in target cell will be overwritten)
target: [0, rowIndex, cellIndex], // target position
- callback: redips.button_enable // function to call after animation is over
+ callback: redips.buttonEnable // function to call after animation is over
//callback: redips.move // try to comment upper line and uncomment this line (refresh page and click on "Move" button)
});
};
@@ -64,7 +64,7 @@ redips.move = function () {
* Function enables/disables button.
* @param {Boolean} Flag enable or disable buttons.
*/
-redips.button_enable = function (flag) {
+redips.buttonEnable = function (flag) {
// input parameter is optional (default value is true)
if (flag === undefined) {
flag = true;
@@ -75,13 +75,13 @@ redips.button_enable = function (flag) {
// toggle clone option
-redips.toggle_clone = function (chk) {
+redips.toggleClone = function (chk) {
redips.clone = chk.checked;
};
// toggle overwrite option
-redips.toggle_overwrite = function (chk) {
+redips.toggleOverwrite = function (chk) {
redips.overwrite = chk.checked;
};
26 example18/script1.js
View
@@ -14,17 +14,17 @@ var redips = {};
redips.init = function () {
// reference to the REDIPS.drag library
var rd = REDIPS.drag;
- // set button reference (needed in redips.button_enable() method)
+ // set button reference (needed in redips.buttonEnable() method)
redips.button1 = document.getElementById('btn_move1');
redips.button2 = document.getElementById('btn_move2');
// initialization
rd.init();
// animation pause (lower values mean the animation plays faster)
- rd.animation_pause = 40;
+ rd.animation.pause = 40;
// animation step (minimum is 1)
- rd.animation_step = 2;
+ rd.animation.step = 2;
// define color for "empty row"
- rd.row_empty_color = 'LightBlue';
+ rd.rowEmptyColor = 'LightBlue';
};
@@ -37,22 +37,22 @@ redips.move = function (tbl) {
row, // returned value from move_object method (array with source row and mini table reference or false in case of moving "empty row")
idx; // index of the last row in table
// last row index
- idx = redips.last_row('table' + tbl);
+ idx = redips.lastRow('table' + tbl);
// move row to the table bottom
- row = rd.move_object({
+ row = rd.moveObject({
mode: 'row', // animation mode - row
source: [1 - tbl, 0], // source position (table index and row index)
target: [tbl, idx], // target position
- callback: redips.button_enable // function to call after animation is finished
+ callback: redips.buttonEnable // function to call after animation is finished
});
// in case of moving "empty row", method will return false and no row will be moved
if (row) {
// disable "Move" buttons
- redips.button_enable(false);
+ redips.buttonEnable(false);
// set opacity for moved row (row[0] is reference of cloned row - mini table)
- rd.row_opacity(row[0], 85);
+ rd.rowOpacity(row[0], 85);
// set opacity for source row and change source row background color (row[1] is reference of source row)
- rd.row_opacity(row[1], 20, 'LightBlue');
+ rd.rowOpacity(row[1], 20, 'LightBlue');
}
};
@@ -61,7 +61,7 @@ redips.move = function (tbl) {
* Function returns index of the last row in table.
* @param {String} table_id Table id.
*/
-redips.last_row = function (table_id) {
+redips.lastRow = function (table_id) {
// define table reference and index of the last row
// row index is greater then last row in table so, row will be appended to the table end
var tbl = document.getElementById(table_id),
@@ -75,7 +75,7 @@ redips.last_row = function (table_id) {
* Function enables/disables "Move" button and DIV elements.
* @param {Boolean} flag enable or disable buttons and DIV elements.
*/
-redips.button_enable = function (flag) {
+redips.buttonEnable = function (flag) {
// if input parameter is not boolean type, then enable_rows is called from callback function
// callback function sends reference of moved element
if (typeof(flag) !== 'boolean') {
@@ -85,7 +85,7 @@ redips.button_enable = function (flag) {
redips.button1.disabled = !flag;
redips.button2.disabled = !flag;
// enable/disable DIV elements in dragging container
- REDIPS.drag.enable_drag(flag, 'drag', 'subtree');
+ REDIPS.drag.enableDrag(flag, 'drag', 'subtree');
};
26 example19/script.js