Skip to content
Browse files

working on example25

  • Loading branch information...
1 parent 64ec9cb commit ca919b1ee2d3753d6038c05cf72b92141cb05892 @dbunic committed Dec 23, 2012
Showing with 244 additions and 90 deletions.
  1. +8 −4 changes.txt
  2. +3 −6 example12/script.js
  3. +1 −1 example17/script.js
  4. +21 −13 example25/index.html
  5. +167 −42 example25/script.js
  6. +21 −3 example25/style.css
  7. +1 −1 index.html
  8. +1 −2 readme.md
  9. +21 −18 redips-drag-source.js
View
12 changes.txt
@@ -1,13 +1,17 @@
Changes for REDIPS.drag library
-5.0.4 (2012-12-20)
-- modified enableDrag - method has option to accept node reference to enable / disable DIV elements inside that node
-- fix inside relocate method (events were registered after DIV element was relocated and that should not be the case)
-- added example26: jQuery dialog
+5.0.5 (2012-12-22)
- event.relocated renamed to event.relocateEnd
- added event.relocateBefore(div, to) - it's called before each element is relocated
- added event.relocateAfter(div, to) - it's called after each element is relocated
- added event.shiftOverflow - called after overflow happen in "shift" drop mode
+- fixed emptyCell - if TD contains only text then it will be treated as empty cell
+- animation.shift property renamed to shift.animation TODO
+
+5.0.4 (2012-12-20)
+- modified enableDrag - method has option to accept node reference to enable / disable DIV elements inside that node
+- fix inside relocate method (events were registered after DIV element was relocated and that should not be the case)
+- added example26: jQuery dialog
5.0.3 (2012-12-19)
- modified emptyCell - now method has option to test target cell and to delete cell content
View
9 example12/script.js
@@ -17,8 +17,7 @@ redipsInit = 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
+ cb, i, j; // element Id
// collect DIV elements from drag region
div1 = divDrag.getElementsByTagName('div');
// loop through collected DIV elements
@@ -38,12 +37,10 @@ redipsInit = function () {
}
// loop through div2 array and move elements to the target table cell
for (i = 0; i < div2.length; i++) {
- // define id of element to move
- id = div2[i].id;
// element will be moved to the dropped table cell
- rd.moveObject({id: id});
+ rd.moveObject({obj: div2[i]});
// try to comment upper line and uncomment this line (elements will be relocated without animation)
- //rd.target_cell.appendChild(div2[i]);
+ //rd.td.target.appendChild(div2[i]);
}
};
};
View
2 example17/script.js
@@ -72,7 +72,7 @@ redipsInit = function () {
};
// element was dropped - move element in opposite table
rd.event.dropped = function () {
- var obj = rd.obj, // reference to the current element
+ var obj = rd.obj, // reference to the current element
idNew = getId(obj); // id of element from opposite table
// disable current element
rd.enableDrag(false, obj);
View
34 example25/index.html
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="../header.js"></script>
- <script type="text/javascript" src="../redips-drag-min.js"></script>
+ <script type="text/javascript" src="../redips-drag-source.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Example 25: Math 4 Kids</title>
</head>
@@ -15,10 +15,18 @@
<div id="main_container">
<!-- drag1 DIV container -->
<div id="drag">
- <select id="dropDown" onchange="redips.setTable(this)">
+ <!-- first dropDown menu -->
+ <select id="dropDown1" onchange="redips.setOperation(this)">
<option value="addition">Addition</option>
<option value="multiplication">Multiplication</option>
</select>
+ <!-- second dropDown menu -->
+ <select id="dropDown2" onchange="redips.setMode(this)">
+ <option value="show">Show</option>
+ <option value="hide">Hide</option>
+ </select>
+ <!-- Clear all button -->
+ <input id="button1" type="button" value="Clear" onclick="redips.clearAll()"/>
<!-- numbers -->
<table id="number">
<colgroup>
@@ -30,18 +38,18 @@
</colgroup>
<tbody>
<tr class="upper">
- <td class="mark"><div class="drag box clone">1</div></td>
- <td class="mark"><div class="drag box clone">2</div></td>
- <td class="mark"><div class="drag box clone">3</div></td>
- <td class="mark"><div class="drag box clone">4</div></td>
- <td class="mark"><div class="drag box clone">5</div></td>
+ <td class="mark"><div class="drag box clone n1">1</div></td>
+ <td class="mark"><div class="drag box clone n2">2</div></td>
+ <td class="mark"><div class="drag box clone n3">3</div></td>
+ <td class="mark"><div class="drag box clone n4">4</div></td>
+ <td class="mark"><div class="drag box clone n5">5</div></td>
</tr>
<tr class="upper">
- <td class="mark"><div class="drag box clone">6</div></td>
- <td class="mark"><div class="drag box clone">7</div></td>
- <td class="mark"><div class="drag box clone">8</div></td>
- <td class="mark"><div class="drag box clone">9</div></td>
- <td class="mark"><div class="drag box clone">10</div></td>
+ <td class="mark"><div class="drag box clone n6">6</div></td>
+ <td class="mark"><div class="drag box clone n7">7</div></td>
+ <td class="mark"><div class="drag box clone n8">8</div></td>
+ <td class="mark"><div class="drag box clone n9">9</div></td>
+ <td class="mark"><div class="drag box clone n10">10</div></td>
</tr>
</tbody>
</table>
@@ -228,7 +236,7 @@
<div class="instructions">
Try to drag numbers from top table to the first column in table below.
After dropping DIV element to the table cell, orange box with "?" will be automatically displayed to the most right column.
- User should click on "?" and result will be shown.
+ User should dblclick on "?" and result will be shown.
REDIPS.drag works in "shift" mode so dropping number on top of existing content will shift other elements.
</div>
</div>
View
209 example25/script.js
@@ -13,28 +13,30 @@ var redips = {};
redips.init = function () {
// reference to the REDIPS.drag class
var rd = REDIPS.drag;
- // set initial math operation
+ // set initial math operation and firstNumberHidden property
redips.operation = 'addition';
+ redips.firstNumberHidden = false;
// REDIPS.drag initialization
rd.init();
- // set shift mode and shift animation
+ // set shift mode and shift animation (shift animation must be turned on because moveObject uses animation)
rd.dropMode = 'shift';
rd.animation.shift = true;
// set vertical shift (each column is treated separately) and overflowed element will be deleted
rd.shift.mode = 'vertical2';
rd.shift.overflow = 'delete';
- // event handler called after DIV is dropped (create result box in the most right column)
- rd.event.dropped = function () {
- var tr, // current row
- num1, num2, // numbers for addition or multiplication
- result; // result
- // set current row
- tr = REDIPS.drag.findParent('TR', rd.obj);
- // set first and second number
- num1 = rd.obj.innerHTML * 1;
- num2 = tr.cells[2].innerHTML * 1;
- // display result box
- tr.cells[4].innerHTML = '<div class="result box r' + redips.math(num1, num2) + '" onclick="window.redips.showResult(this)">?</div>';
+ // event handler called a moment before DIV is dropped (create result box in the most right column)
+ rd.event.droppedBefore = function (targetTD) {
+ // TD in 4th column
+ var td4 = targetTD.parentNode.cells[4];
+ // if right column is empty then create orange DIV box in last column
+ if (rd.emptyCell(td4, 'test')) {
+ // reference is target TD (needed to find parent row) while DIV is rd.obj element
+ redips.createOrangeBox(targetTD, rd.obj);
+ }
+ // else set reference to the redips.obj (needed in event.relocateEnd and event.shiftOverflow)
+ else {
+ redips.obj = rd.obj;
+ }
};
// even handler called when DIV element is moved (delete result box if DIV is moved in the bottom table)
rd.event.moved = function () {
@@ -44,43 +46,142 @@ redips.init = function () {
if (tr.className.indexOf('upper') === -1) {
tr.cells[4].innerHTML = '';
}
+ // if numbers in upper tables are hidden, then hide number when left DIV element is moved
+ if (redips.firstNumberHidden) {
+ rd.obj.innerHTML = '?';
+ }
};
// called before each DIV element is shifted (needed move orange box pn the right side)
rd.event.relocateBefore = function (div, to) {
var tr = rd.findParent('TR', div), // set current TR from DIV element that will be shifted by REDIPS.drag
resultDiv = tr.cells[4].getElementsByTagName('div')[0], // define result DIV (right orange DIV element)
target = to.parentNode.cells[4], // define target TD
- num1 = div.innerHTML * 1; // set first number (from DIV element that will be shifted by REDIPS.drag)
- // move right (orange) box
+ num1 = redips.readNumber(div); // set first number (from DIV element that will be shifted by REDIPS.drag)
+ // if numbers in upper tables are hidden, then hide number in left DIV when they are shifted
+ if (redips.firstNumberHidden) {
+ div.innerHTML = '?';
+ }
+ // move right (orange) box (moveObject moves DIV element with animation)
rd.moveObject({
obj: resultDiv,
target: target,
// call after result DIV is moved (el is reference to the moved DIV element)
callback: function (el) {
var targetTR = rd.findParent('TR', el), // set target TR
- num2 = targetTR.cells[2].innerHTML * 1; // set number2 from target TR
+ num2 = targetTR.cells[2].innerHTML * 1, // set number2 from target TR
+ result = redips.math(num1, num2);
// save (hide) new result to the class r(n+) and display "?"
- el.className = el.className.replace(/r\d+/g, 'r' + redips.math(num1, num2));
- el.innerHTML = '?';
+ el.className = el.className.replace(/n\d+/g, 'n' + result);
+ // if redips.firstNumberHidden is set to true then result in orange box should be displayed
+ if (redips.firstNumberHidden) {
+ el.innerHTML = result;
+ }
+ else {
+ el.innerHTML = '?';
+ }
}
});
};
- // delete last orange box when overflow happen (target is TD where overflow occurred)
+ // call after all shifting is finished (create orange DIV element for the dropped DIV)
+ rd.event.relocateEnd = function () {
+ // reference and DIV element is the same
+ redips.createOrangeBox(redips.obj, redips.obj);
+ };
+ // delete last orange box when overflow happen (target is TD where overflow occurres) but not when DIV is dropped to the last row
rd.event.shiftOverflow = function (target) {
- var rightCell = target.parentNode.cells[4];
- // empty right cell
- rd.emptyCell(rightCell);
+ // if DIV is dropped to the last row from upper table and target cell is not empty then overflow will happen
+ // in this case relocateEnd will not be called because there isn't any element for shifting
+ // so it's needed to recreate orange box in the right column
+ // rd.td.target is target cell where DIV element is dropped (this is defined within REDIPS.drag library)
+ if (rd.td.target.parentElement.rowIndex === 9) {
+ redips.createOrangeBox(target, redips.obj);
+ }
+ // for overflow in all other cases delete right cell
+ else {
+ // set right cell
+ var rightCell = target.parentNode.cells[4];
+ // delete right cell
+ rd.emptyCell(rightCell);
+
+ }
};
+ // if left DIV element is dbl clicked then show number
+ rd.event.dblClicked = function () {
+ rd.obj.innerHTML = redips.readNumber(rd.obj);
+ }
+};
+
+
+// create orange box
+// el is node from which will be found parent row
+// div is reference of DIV element from whom is needed to read first number
+redips.createOrangeBox = function (el, div) {
+ var tr, // current row
+ num1, num2, // numbers for addition or multiplication
+ result, // result will be hidden or displayed depending on redips.firstNumberHidden property
+ td4; // TD in 4th column
+ // set current row
+ tr = REDIPS.drag.findParent('TR', el);
+ // set result cell
+ td4 = tr.cells[4];
+ // set first and second number and make implicit cast to numeric
+ num1 = redips.readNumber(div);
+ num2 = tr.cells[2].innerHTML * 1;
+ // set result
+ if (redips.firstNumberHidden) {
+ result = redips.math(num1, num2);
+ }
+ else {
+ result = '?';
+ }
+ // display result box
+ td4.innerHTML = '<div class="result box n' + redips.math(num1, num2) + '" ondblclick="window.redips.showResult(this)">' + result + '</div>';
+};
+
+
+// do math with num1 and num2
+redips.math = function (num1, num2) {
+ var result;
+ // add or multiply num1 and num2
+ if (redips.operation === 'addition') {
+ result = num1 + num2;
+ }
+ else {
+ result = num1 * num2;
+ }
+ // return result
+ return result;
+};
+
+
+// display result below "?" (called after user clicks on result DIV)
+redips.showResult = function (div) {
+ div.innerHTML = redips.readNumber(div);
+};
+
+
+// read number from class number in format n(n+)
+redips.readNumber = function (el) {
+ // result is saved as a class name n(n+)
+ var className = el.className,
+ matchArray = className.match(/n(\d+)/);
+ // return number (implicit cast to numeric)
+ return matchArray[1] * 1;
};
+// -------------------------------------------------
+// methods called from UI
+// -------------------------------------------------
+
+// called onchange of first dropDown menu
// set operation - addition / multiplication
-redips.setTable = function (e) {
+redips.setOperation = function (el) {
// set local variables
var tables = document.getElementById('drag').getElementsByTagName('table'),
i;
// set operation (global) - needed in event.dropped
- redips.operation = e.options[e.selectedIndex].value;
+ redips.operation = el.options[el.selectedIndex].value;
// loop goes through all fetched tables within drag container
for (i = 0; i < tables.length; i++) {
// skip number or mini table
@@ -99,31 +200,55 @@ redips.setTable = function (e) {
};
-// do math with num1 and num2
-redips.math = function (num1, num2) {
- var result;
- // add or multiply num1 and num2
- if (redips.operation === 'addition') {
- result = num1 + num2;
+// called onchange of second dropDown menu
+// show hide numbers in upper table
+redips.setMode = function (el) {
+ var option = el.options[el.selectedIndex].value,
+ div = document.getElementById('number').getElementsByTagName('div'),
+ i;
+ // when application mode is changed then tables should be cleaned
+ redips.clearAll();
+ // set firstNumberHidden property based on second dropDown menu
+ if (option === 'show') {
+ redips.firstNumberHidden = false;
}
else {
- result = num1 * num2;
+ redips.firstNumberHidden = true;
+ }
+ // loop through all DIV elements
+ for (i = 0; i < div.length; i++) {
+ if (redips.firstNumberHidden) {
+ div[i].innerHTML = '?';
+ }
+ else {
+ div[i].innerHTML = redips.readNumber(div[i]);
+ }
}
- // return result
- return result;
};
-
-// display result below "?" (called after user clicks on result DIV)
-redips.showResult = function (div) {
- // result is saved as a class name r(n+)
- var className = div.className,
- matchArray = className.match(/r(\d+)/);
- // show result
- div.innerHTML = matchArray[1];
+// called on click of clear button
+// method removes all DIV elements from addition and multiplication table
+redips.clearAll = function () {
+ // collect all DIV elements from drag container
+ var div = document.getElementById('drag').getElementsByTagName('div'),
+ el,
+ i;
+ // loop through all DIV elements (it should go backward because nodeList is alive)
+ for (i = div.length - 1; i >= 0; i--) {
+ // set current DIV element
+ el = div[i];
+ // if DIV element is "box" type but is not of "clone" type (DIV elements in upper table should not be deleted
+ if (el.className.indexOf('box') > -1 && el.className.indexOf('clone') === -1) {
+ el.parentNode.removeChild(el);
+ }
+ }
};
+// -------------------------------------------------
+// attach event listener on body load
+// -------------------------------------------------
+
// add onload event listener
if (window.addEventListener) {
window.addEventListener('load', redips.init, false);
View
24 example25/style.css
@@ -67,19 +67,37 @@ div#drag td {
border: 2px solid #A66C1D;
/* cursor */
cursor: pointer;
- cursor: hand;
+ cursor: hand;select
+ /* disable text selection (answer is displayed with dblclick and that can cause showing text selection) */
+ /* http://stackoverflow.com/questions/3779534/how-to-disable-text-selection-with-css-or-js */
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
/* forbidden cells */
.mark {
background-color: #eee;
}
-/* margins for drop down menu */
-#dropDown {
+/* first dropDown menu */
+#dropDown1 {
margin: 15px 0 0 15px;
}
+/* second dropDown menu */
+#dropDown2 {
+ margin: 15px 0 0 5px;
+}
+
+/* clear button */
+#button1 {
+ margin: 15px 0 0 5px;
+}
+
/* trash cell */
.trash {
color: white;
View
2 index.html
@@ -36,7 +36,7 @@
<body>
<center>
<h2><a href="http://www.redips.net/javascript/drag-and-drop-table-content/" title="www.redips.net">REDIPS_drag</a> / <a href="http://www.redips.net/javascript/redips-drag-documentation/" title="REDIPS.drag documentation">Documentation</a> / <a href="http://www.redips.net/javascript/redips-drag-documentation-appendix-a/" title="REDIPS.drag documentation - Appendix A">Appendix A</a></h2>
- <h3>Drag and drop table content/rows with JavaScript - Version 5.0.4 (<a href="changes.txt">changes</a>)</h3>
+ <h3>Drag and drop table content/rows with JavaScript - Version 5.0.5 (<a href="changes.txt">changes</a>)</h3>
</center>
<!-- tables inside this DIV could have draggable content -->
<div id="drag">
View
3 readme.md
@@ -1,4 +1,4 @@
-REDIPS.drag 5.0.4
+REDIPS.drag 5.0.5
============
## What's REDIPS.drag?
@@ -34,7 +34,6 @@ REDIPS.drag is a JavaScript drag and drop library focused on dragging table cont
* REDIPS.drag.init() - drag container initialization
* REDIPS.drag.initTables() - tables layout initialization
-
* REDIPS.drag.cloneObject() - clones DIV element and returns reference of the cloned element
* REDIPS.drag.deleteObject() - method deletes DIV element (input parameter is DIV reference or element id)
* REDIPS.drag.emptyCell() - test if table cell contains DIV elements or remove elements from TD
View
39 redips-drag-source.js
@@ -2,7 +2,7 @@
Copyright (c) 2008-2011, www.redips.net All rights reserved.
Code licensed under the BSD License: http://www.redips.net/license/
http://www.redips.net/javascript/drag-and-drop-table-content/
-Version 5.0.4
+Version 5.0.5
Dec 21, 2012.
*/
@@ -34,7 +34,7 @@ var REDIPS = REDIPS || {};
* <a href="http://www.redips.net/javascript/drag-and-drop-table-row/">Drag and drop table rows</a>
* <a href="http://www.redips.net/javascript/drag-and-drop-table-content/">Drag and Drop table content</a>
* <a href="http://www.redips.net/javascript/drag-and-drop-content-shift/">JavaScript drag and drop plus content shift</a>
- * @version 5.0.4
+ * @version 5.0.5
*/
REDIPS.drag = (function () {
// methods
@@ -3219,6 +3219,8 @@ REDIPS.drag = (function () {
/**
* Method tests TD if is empty or removes elements from table cell.
+ * Cell is considered as empty if does not contain any child nodes or if cell has only one text node.
+ * In other words, if cell contains only text then it will be treated as empty cell.
* @param {HTMLElement} td Table cell to test or from which all the elements will be deleted.
* @param {String} [mode] If mode is set to "test" then method will only test TD and return true or false.
* @example
@@ -3235,10 +3237,10 @@ REDIPS.drag = (function () {
* @name REDIPS.drag#emptyCell
*/
emptyCell = function (tdElement, mode) {
- var cn, // number of child nodes
- el = [], // removed elements will be saved in array
- flag = true, // set initial flag to true (needed for cell testing)
- i; // loop variable
+ var cn, // number of child nodes
+ el = [], // removed elements will be saved in array
+ flag, // empty cell flag
+ i; // loop variable
// td should be table cell element
if (tdElement.nodeName !== 'TD') {
return;
@@ -3247,17 +3249,17 @@ REDIPS.drag = (function () {
cn = tdElement.childNodes.length;
// if mode is set to "test" then check for cell content
if (mode === 'test') {
- // open loop for each child node and jump out if 'drag' className found
- for (i = cn - 1; i >= 0; i--) {
- // skip source (cell from which it started)
- if (td.source === tdElement) {
- continue;
- }
- // if cell contains DIV class="drag" then set flag to false
- if (tdElement.childNodes[i].className && tdElement.childNodes[i].className.indexOf('drag') > -1) {
- flag = false;
- break;
- }
+ // in case of source cell, return undefined
+ if (td.source === tdElement) {
+ flag = undefined;
+ }
+ // cell without child nodes or if cell has only one node and that is text node then cell is empty
+ else if (tdElement.childNodes.length === 0 || (tdElement.childNodes.length === 1 && tdElement.firstChild.nodeType === 3)) {
+ flag = true;
+ }
+ // otherwise, cell contain some elements
+ else {
+ flag = false;
}
// return empty flag state
return flag;
@@ -3571,6 +3573,7 @@ REDIPS.drag = (function () {
/**
* Method will calculate parameters and start animation (DIV element to the target table cell).
+ * "moveObject" will always move DIV element with animation while "relocate" has option to relocate all DIV elements from one TD to another TD with or without animation.
* If "target" property is not defined then current location will be used. Here is properties definition of input parameter:
* <ul>
* <li>{String} id - id of element to animate - DIV element or row handler (div class="drag row")</li>
@@ -3634,7 +3637,7 @@ REDIPS.drag = (function () {
* target: [0, 6], // target position
* callback: enable_button // function to call after animation is over
* });
- * @see <a href="#event:cloned">event.cloned</a>
+ * @see <a href="#relocate">relocate</a>
* @public
* @function
* @name REDIPS.drag#moveObject

0 comments on commit ca919b1

Please sign in to comment.
Something went wrong with that request. Please try again.