Permalink
Browse files

Example 25

  • Loading branch information...
1 parent 530611b commit 3eacad88c85fbe8a324d8ba6a743ac768f27920f @dbunic committed Dec 6, 2012
Showing with 292 additions and 4 deletions.
  1. +2 −2 example05/style.css
  2. +1 −1 example21/style.css
  3. +149 −0 example25/index.html
  4. +56 −0 example25/script.js
  5. +83 −0 example25/style.css
  6. +1 −1 index.html
View
@@ -8,11 +8,11 @@ May, 2010.
body{
font-family: arial;
- margin: 0px; /* for IE6 / IE7 */
+ margin: 0px;
}
-/* drag container */
+/* main container */
#main_container{
margin: auto;
width: 700px;
View
@@ -8,7 +8,7 @@ Oct, 2011.
body{
font-family: arial;
- margin: 0px; /* for IE6 / IE7 */
+ margin: 0px;
}
/* make drag container visible */
View
@@ -0,0 +1,149 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta name="author" content="Darko Bunic"/>
+ <meta name="description" content="Drag and drop table content with JavaScript"/>
+ <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="script.js"></script>
+ <title>Example 25: Multiplication</title>
+ </head>
+ <body>
+ <!-- main container -->
+ <div id="main_container">
+ <!-- drag1 DIV container -->
+ <div id="drag">
+ <!-- first table -->
+ <table>
+ <colgroup>
+ <col width="50"/>
+ <col width="50"/>
+ <col width="50"/>
+ <col width="50"/>
+ <col width="50"/>
+ </colgroup>
+ <tbody>
+ <tr class="upper">
+ <td class="mark"><div class="drag clone">1</div></td>
+ <td class="mark"><div class="drag clone">2</div></td>
+ <td class="mark"><div class="drag clone">3</div></td>
+ <td class="mark"><div class="drag clone">4</div></td>
+ <td class="mark"><div class="drag clone">5</div></td>
+ </tr>
+ <tr class="upper">
+ <td class="mark"><div class="drag clone">6</div></td>
+ <td class="mark"><div class="drag clone">7</div></td>
+ <td class="mark"><div class="drag clone">8</div></td>
+ <td class="mark"><div class="drag clone">9</div></td>
+ <td class="mark"><div class="drag clone">10</div></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- second table -->
+ <table>
+ <colgroup>
+ <col width="50"/>
+ <col width="50"/>
+ <col width="50"/>
+ <col width="50"/>
+ <col width="50"/>
+ </colgroup>
+ <tbody>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">1</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">2</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">3</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">4</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">5</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">6</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">7</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">8</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">9</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td class="mark">x</td>
+ <td class="mark">10</td>
+ <td class="mark">=</td>
+ <td class="mark"></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- third table -->
+ <table>
+ <colgroup>
+ <col width="100"/>
+ </colgroup>
+ <tbody>
+ <tr>
+ <td class="trash">Trash</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!-- instructions -->
+ <div class="instructions">
+ Try to drag numbers from top table to the first column.
+ After dropping DIV element to the table cell, result will be automatically displayed.
+ REDIPS.drag works in "overwrite" method so dropping number on top of existing content will overwrite bottom element.
+ Numbers placed in first column can be cloned with shift key. Just press shift key and try to drag DIV element.
+ </div>
+ </div>
+ </body>
+</html>
View
@@ -0,0 +1,56 @@
+/*jslint white: true, browser: true, undef: true, nomen: true, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxerr: 14 */
+/*global window: false, REDIPS: true */
+
+/* enable strict mode */
+"use strict";
+
+// define redipsInit variable
+var redipsInit;
+
+// redips initialization
+redipsInit = function () {
+ // reference to the REDIPS.drag class
+ var rd = REDIPS.drag;
+ // REDIPS.drag initialization
+ rd.init();
+ // set overwrite mode
+ rd.dropMode = 'overwrite';
+ // enable cloning with shift key
+ rd.clone.keyDiv = true;
+ // event handler called after DIV is dropped
+ rd.event.dropped = function (targetCell) {
+ var tr, // current row
+ m1, m2; // first and second multiplier
+ // set first multiplier
+ m1 = rd.obj.innerHTML * 1;
+ // set current row
+ tr = rd.findParent('TR', targetCell);
+ // set second multiplier
+ m2 = tr.cells[2].innerHTML * 1;
+ // multiply num1 and num2 and place result to the last cell in the row
+ tr.cells[4].innerHTML = m1 * m2;
+ };
+ // even handler called when DIV element is moved
+ rd.event.moved = function (cloned) {
+ var tr;
+ // if DIV element is not cloned
+ if (!cloned) {
+ // set source row
+ tr = rd.findParent('TR', rd.td.source);
+ // if ...
+ if (tr.className.indexOf('upper') === -1) {
+ // delete result
+ tr.cells[4].innerHTML = '';
+ }
+ }
+ };
+};
+
+
+// add onload event listener
+if (window.addEventListener) {
+ window.addEventListener('load', redipsInit, false);
+}
+else if (window.attachEvent) {
+ window.attachEvent('onload', redipsInit);
+}
View
@@ -0,0 +1,83 @@
+/*
+
+Darko Bunic
+http://www.redips.net/
+Dec, 2012.
+
+*/
+
+body {
+ font-family: arial;
+ margin: 0px;
+}
+
+/* main container */
+#main_container{
+ margin: auto;
+ width: 570px;
+}
+
+/* make drag container visible */
+#drag {
+ border: 2px dashed LightBlue;
+ display: table;
+ float: left;
+}
+
+/* tables */
+div#drag table {
+ border-collapse: collapse;
+ margin: 15px;
+ font-size: 20pt;
+ text-align: center;
+}
+
+/* table cells */
+div#drag td {
+ border: 1px solid navy;
+ height: 50px;
+ padding: 2px;
+}
+
+/* DIV elements */
+.drag {
+ margin: auto;
+ margin-bottom: 1px;
+ margin-top: 1px;
+ font-size: 20pt;
+ text-align: center;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ border: 2px solid SteelBlue;
+ background-color: white;
+ /* round corners */
+ border-radius: 4px; /* Opera, Chrome */
+ -moz-border-radius: 4px; /* FF */
+}
+
+/* forbidden cells */
+.mark {
+ background-color: #eee;
+}
+
+/* trash cell */
+.trash {
+ color: white;
+ background-color: SteelBlue;
+ font-size: 15pt;
+}
+
+/* instructions */
+.instructions {
+ float: left;
+ border: 2px dashed LightBlue;
+ display: table;
+ margin-left: 15px;
+ width: 220px;
+ padding: 15px;
+ color: #555;
+ font-size: 12px;
+ text-align: justify;
+ background-color: #eee;
+}
View
@@ -90,7 +90,7 @@
<tr>
<td><div id="link1" class="drag t1">Example 07<br/><a href="example07/index1.html">A B C D</a> / <a href="example07/index2.html">E F</a></div></td>
<td><div id="link1" class="drag t1">Example 16<br/><a href="example16/">AJAX, hover, sticky, dragging</a></div></td>
- <td></td>
+ <td><div id="link1" class="drag t1">Example 25<br/><a href="example25/">Multiplication</a></div></td>
</tr>
<tr>
<td><div id="link1" class="drag t1">Example 08<br/><a href="example08/">Tables in separated containers</a></div></td>

0 comments on commit 3eacad8

Please sign in to comment.