Permalink
Browse files

Added example 27 TD content

  • Loading branch information...
1 parent 8f65839 commit b58e3a25679b340989c75eaf791471bc3081b8ed @dbunic committed Apr 23, 2013
Showing with 266 additions and 20 deletions.
  1. +3 −0 changes.txt
  2. +65 −0 example27/index.html
  3. +78 −0 example27/script.js
  4. +100 −0 example27/style.css
  5. +20 −20 index.html
View
@@ -1,5 +1,8 @@
Changes for REDIPS.drag library
+5.0.6 (2013-04-23)
+- added example27 - TD content
+
5.0.6 (2013-03-07)
- small fixes
View
@@ -0,0 +1,65 @@
+<!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 27: TD content</title>
+ </head>
+ <body>
+ <!-- tables inside this DIV could have draggable content -->
+ <div id="drag">
+ <!-- left container -->
+ <div id="left">
+ <table id="table1">
+ <colgroup>
+ <col width="100"/>
+ </colgroup>
+ <tr>
+ <td class="single">
+ <div id="a" class="drag clone orange">A</div>
+ </td>
+ </tr>
+ <tr>
+ <td class="single">
+ <div id="b" class="drag clone green">B</div>
+ </td>
+ </tr>
+ <tr>
+ <td class="single">
+ <div id="c" class="drag clone blue">C</div>
+ </td>
+ </tr>
+ <tr>
+ <td class="trash">Trash</td>
+ </tr>
+ </table>
+ </div>
+
+ <!-- right container -->
+ <div id="right">
+ <table id="table2">
+ <colgroup>
+ <col width="100"/> <!-- first activity column -->
+ <col width="100"/> <!-- second activity column -->
+ </colgroup>
+ <tr>
+ <td id="td1"></td>
+ <td id="td2"></td>
+ </tr>
+ <tr>
+ <td id="td3"></td>
+ <td id="td4"></td>
+ </tr>
+ </table>
+ </div>
+
+ <!-- display block content -->
+ <div id="message"/>
+ </div>
+ </body>
+</html>
View
@@ -0,0 +1,78 @@
+/*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 init and show methods
+var redipsInit,
+ showContent,
+ getContent;
+
+// redips initialization
+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.colorTd = '#9BB3DA';
+ // call initially showContent
+ showContent();
+ // on each drop refresh content
+ rd.event.dropped = function () {
+ showContent();
+ };
+ // call showContent() after DIV element is deleted
+ rd.event.deleted = function () {
+ showContent();
+ };
+};
+
+
+// show TD content
+showContent = function () {
+ // get content of TD cells in right table
+ var td1 = getContent('td1'),
+ td2 = getContent('td2'),
+ td3 = getContent('td3'),
+ td4 = getContent('td4'),
+ // set reference to the message DIV (below tables)
+ message = document.getElementById('message');
+ // show block content
+ message.innerHTML = 'td1 = ' + td1 + '<br>' +
+ 'td2 = ' + td2 + '<br>' +
+ 'td3 = ' + td3 + '<br>' +
+ 'td4 = ' + td4;
+};
+
+
+// get content (DIV elements in TD)
+getContent = function (id) {
+ var td = document.getElementById(id),
+ content = '',
+ cn, i;
+ // TD can contain many DIV elements
+ for (i = 0; i < td.childNodes.length; i++) {
+ // set reference to the child node
+ cn = td.childNodes[i];
+ // childNode should be DIV with containing "drag" class name
+ if (cn.nodeName === 'DIV' && cn.className.indexOf('drag') > -1) { // and yes, it should be uppercase
+ // append DIV id to the result string
+ content += cn.id + '_';
+ }
+ }
+ // cut last '_' from string
+ content = content.substring(0, content.length - 1);
+ // return result
+ return content;
+};
+
+
+// add onload event listener
+if (window.addEventListener) {
+ window.addEventListener('load', redipsInit, false);
+}
+else if (window.attachEvent) {
+ window.attachEvent('onload', redipsInit);
+}
View
@@ -0,0 +1,100 @@
+/*
+
+Darko Bunic
+http://www.redips.net/
+Apr, 2013.
+
+*/
+
+body {
+ font-family: arial;
+ margin: 0px;
+}
+
+/* drag container*/
+#drag {
+ border: 2px dashed LightBlue;
+ width: 330px;
+ margin: auto;
+}
+ /* left container */
+ #drag #left {
+ float: left;
+ width: 110px;
+ }
+ /* right container */
+ #drag #right {
+ display: table;
+ table-layout: auto;
+ /* align div to the right */
+ margin-left: auto;
+
+ }
+
+
+/* DIV object */
+.drag {
+ margin: auto;
+ text-align: center;
+ width: 77px;
+ height: 25px;
+ line-height: 25px;
+ background-color: white;
+ font-size: 10pt; /* needed for cloned object */
+ /* round corners */
+ border-radius: 4px; /* Opera, Chrome */
+ -moz-border-radius: 4px; /* FF */
+ margin-bottom: 2px;
+}
+
+/* tables */
+div#drag table {
+ background-color: #eee;
+ border-collapse: collapse;
+ margin: 5px;
+}
+ /* table cells */
+ div#drag td {
+ border: 1px solid white;
+ text-align: center;
+ font-size: 10pt;
+ padding: 0px;
+ }
+ table#table1 td {
+ height: 60px;
+ }
+ table#table2 td {
+ height: 122px;
+ }
+
+
+/* green, orange and blue DIV elements */
+.green {
+ border: 1px solid #499B33;
+}
+.orange {
+ border: 1px solid #BF6A30;
+}
+.blue {
+ border: 1px solid SteelBlue;
+}
+
+/* message below tables */
+#message {
+ padding-left: 10px;
+ color: #6A93D4;
+ height: 100px;
+ padding-top: 20px;
+}
+
+/* single content cells (with clone objects on the left) */
+.single {
+ background-color: #e0e0e0;
+}
+
+/* trash cell */
+.trash {
+ color: white;
+ background-color: SteelBlue;
+ height: 26px;
+}
View
@@ -54,52 +54,52 @@
<!-- table data -->
<tr>
<td><div id="link1" class="drag t1">Example 00<br/><a href="example00/index1.html">Minimal steps</a> / <a href="example00/index2.html">AJAX jQuery</a></div></td>
- <td><div id="link1" class="drag t1">Example 09<br/><a href="example09/">Single and shift mode</a></div></td>
- <td><div id="link1" class="drag t1">Example 18<br/><a href="example18/">Simple element animation</a> / <a href="example18/index1.html">row</a></div></td>
+ <td><div id="link1" class="drag t1">Example 10<br/><a href="example10/">Sticky tables</a></div></td>
+ <td><div id="link1" class="drag t1">Example 20<br/><a href="example20/">Clone and delete table rows</a></div></td>
</tr>
<tr>
<td><div id="link1" class="drag t1">Example 01<br/><a href="example01/">Three tables</a></div></td>
- <td><div id="link1" class="drag t1">Example 10<br/><a href="example10/">Sticky tables</a></div></td>
- <td><div id="link1" class="drag t1">Example 19<br/><a href="example19/">Groups and table rows</a></div></td>
+ <td><div id="link1" class="drag t1">Example 11<br/><a href="example11/">Drag handle on titlebar</a></div></td>
+ <td><div id="link1" class="drag t1">Example 21<br/><a href="example21/">Shift table content</a> / <a href="example21/simple/index.html">simple</a></div></td>
</tr>
<tr>
<td><div id="link1" class="drag t1">Example 02<br/><a href="example02/">Green and orange elements</a></div></td>
- <td><div id="link1" class="drag t1">Example 11<br/><a href="example11/">Drag handle on titlebar</a></div></td>
- <td><div id="link1" class="drag t1">Example 20<br/><a href="example20/">Clone and delete table rows</a></div></td>
+ <td><div id="link1" class="drag t1">Example 12<br/><a href="example12/">Select and move more elements</a></div></td>
+ <td><div id="link1" class="drag t1">Example 22<br/><a href="example22/">Drag and form details</a></div></td>
</tr>
<tr>
<td><div id="link1" class="drag t1">Example 03<br/><a href="example03/index.php">School timetable</a> (<a href="example03/index_static.html">static</a>)</div></td>
- <td><div id="link1" class="drag t1">Example 12<br/><a href="example12/">Select and move more elements</a></div></td>
- <td><div id="link1" class="drag t1">Example 21<br/><a href="example21/">Shift table content</a> / <a href="example21/simple/index.html">simple</a></div></td>
+ <td><div id="link1" class="drag t1">Example 13<br/><a href="example13/">Nested tables</a></div></td>
+ <td><div id="link1" class="drag t1">Example 23<br/><a href="example23/">Shopping cart</a></div></td>
</tr>
<tr>
<td><div id="link1" class="drag t1">Example 04<br/><a href="example04/">Tic Tac Toe</a></div></td>
- <td><div id="link1" class="drag t1">Example 13<br/><a href="example13/">Nested tables</a></div></td>
- <td><div id="link1" class="drag t1">Example 22<br/><a href="example22/">Drag and form details</a></div></td>
+ <td><div id="link1" class="drag t1">Example 14<br/><a href="example14/">Sort elements in long table</a></div></td>
+ <td><div id="link1" class="drag t1">Example 24<br/><a href="example24/">Table editor</a></div></td>
</tr>
<tr>
<td><div id="link1" class="drag t1">Example 05<br/><a href="example05/">Scrollable DIV containers</a></div></td>
- <td><div id="link1" class="drag t1">Example 14<br/><a href="example14/">Sort elements in long table</a></div></td>
- <td><div id="link1" class="drag t1">Example 23<br/><a href="example23/">Shopping cart</a></div></td>
+ <td><div id="link1" class="drag t1">Example 15<br/><a href="example15/">Drag and drop table rows</a></div></td>
+ <td><div id="link1" class="drag t1">Example 25<br/><a href="example25/">Math 4 Kids</a></div></td>
</tr>
<tr>
<td><div id="link1" class="drag t1">Example 06<br/><a href="example06/">Scrollable and fixed containers</a></div></td>
- <td><div id="link1" class="drag t1">Example 15<br/><a href="example15/">Drag and drop table rows</a></div></td>
- <td><div id="link1" class="drag t1">Example 24<br/><a href="example24/">Table editor</a></div></td>
+ <td><div id="link1" class="drag t1">Example 16<br/><a href="example16/">AJAX, hover, sticky, dragging</a></div></td>
+ <td><div id="link1" class="drag t1">Example 26<br/><a href="example26/">jQuery dialog</a></div></td>
</tr>
<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><div id="link1" class="drag t1">Example 25<br/><a href="example25/">Math 4 Kids</a></div></td>
+ <td><div id="link1" class="drag t1">Example 17<br/><a href="example17/">Move object (animation)</a></div></td>
+ <td><div id="link1" class="drag t1">Example 27<br/><a href="example27/">TD content</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>
- <td><div id="link1" class="drag t1">Example 17<br/><a href="example17/">Move object (animation)</a></div></td>
- <td><div id="link1" class="drag t1">Example 26<br/><a href="example26/">jQuery dialog</a></div></td>
+ <td><div id="link1" class="drag t1">Example 18<br/><a href="example18/">Simple element animation</a> / <a href="example18/index1.html">row</a></div></td>
+ <td></td>
</tr>
<tr>
- <td></td>
- <td></td>
+ <td><div id="link1" class="drag t1">Example 09<br/><a href="example09/">Single and shift mode</a></div></td>
+ <td><div id="link1" class="drag t1">Example 19<br/><a href="example19/">Groups and table rows</a></div></td>
<td></td>
</tr>
<tr>

0 comments on commit b58e3a2

Please sign in to comment.