Permalink
Browse files

added example21 Simple shift

  • Loading branch information...
1 parent e0300ff commit d3f979ffd4165fedd7b8f004fe3abd82fa8457f1 @dbunic committed Nov 27, 2012
View
@@ -9,6 +9,7 @@ Changes for REDIPS.drag library
- enableDrag uses CSS selector
- added clone.sendBack option - if set to true, cloned DIV element could be returned to the source
- updated documentation
+- added example21 Simple shift
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
View
@@ -10,7 +10,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">
- var redips_url = '/javascript/drag-and-drop-example-3/';
+ var redipsURL = '/javascript/drag-and-drop-example-3/';
</script>
<script type="text/javascript" src="../header.js"></script>
<script type="text/javascript" src="../redips-drag-min.js"></script>
@@ -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">
- var redips_url = '/javascript/drag-and-drop-example-3/';
+ var redipsURL = '/javascript/drag-and-drop-example-3/';
</script>
<script type="text/javascript" src="../header.js"></script>
<script type="text/javascript" src="../redips-drag-min.js"></script>
View
@@ -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">
- var redips_url = '/javascript/drag-and-drop-table-row/';
+ var redipsURL = '/javascript/drag-and-drop-table-row/';
</script>
<script type="text/javascript" src="../header.js"></script>
<script type="text/javascript" src="../redips-drag-min.js"></script>
View
@@ -7,7 +7,7 @@
<link rel="stylesheet" href="style-screen.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="style-print.css" type="text/css" media="print"/>
<script type="text/javascript">
- var redips_url = '/javascript/drag-and-drop-table-row/';
+ var redipsURL = '/javascript/drag-and-drop-table-row/';
</script>
<script type="text/javascript" src="../header.js"></script>
<script type="text/javascript" src="../redips-drag-min.js"></script>
View
@@ -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">
- var redips_url = '/javascript/drag-and-drop-table-content-animation/';
+ var redipsURL = '/javascript/drag-and-drop-table-content-animation/';
</script>
<script type="text/javascript" src="../header.js"></script>
<script type="text/javascript" src="../redips-drag-min.js"></script>
View
@@ -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">
- var redips_url = '/javascript/drag-and-drop-table-content-animation/';
+ var redipsURL = '/javascript/drag-and-drop-table-content-animation/';
</script>
<script type="text/javascript" src="../header.js"></script>
<script type="text/javascript" src="../redips-drag-min.js"></script>
View
@@ -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">
- var redips_url = '/javascript/drag-and-drop-table-content-animation/';
+ var redipsURL = '/javascript/drag-and-drop-table-content-animation/';
</script>
<script type="text/javascript" src="../header.js"></script>
<script type="text/javascript" src="../redips-drag-min.js"></script>
View
@@ -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">
- var redips_url = '/javascript/drag-and-drop-table-row/';
+ var redipsURL = '/javascript/drag-and-drop-table-row/';
</script>
<script type="text/javascript" src="../header.js"></script>
<script type="text/javascript" src="../redips-drag-min.js"></script>
View
@@ -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">
- var redips_url = '/javascript/drag-and-drop-content-shift/';
+ var redipsURL = '/javascript/drag-and-drop-content-shift/';
</script>
<script type="text/javascript" src="../header.js"></script>
<script type="text/javascript" src="../redips-drag-min.js"></script>
@@ -0,0 +1,70 @@
+<!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"/>
+ <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
+ <script type="text/javascript">
+ var indexURL = '../../';
+ </script>
+ <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 21: Simple shift</title>
+ </head>
+ <body>
+ <!-- tables inside this DIV could have draggable content -->
+ <div id="drag">
+ <table id="table1">
+ <colgroup>
+ <col width="100"/>
+ <col width="100"/>
+ <col width="100"/>
+ <col width="100"/>
+ <col width="100"/>
+ <col width="100"/>
+ </colgroup>
+ <tbody>
+ <tr id="myRow">
+ <td><div id="d1" class="drag">1</div></td>
+ <td><div id="d2" class="drag">2</div></td>
+ <td><div id="d3" class="drag">3</div></td>
+ <td><div id="d4" class="drag">4</div></td>
+ <td><div id="d5" class="drag">5</div></td>
+ <td><div id="d6" class="drag">6</div></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id="table2">
+ <colgroup>
+ <col width="100"/>
+ <col width="100"/>
+ <col width="100"/>
+ </colgroup>
+ <tbody>
+ <tr>
+ <td></td>
+ <td></td>
+ <td class="upper_right"></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <th></th>
+ </tr>
+ <tr>
+ <td class="lower_left"></td>
+ <th></th>
+ <th></th>
+ </tr>
+ </tbody>
+ </table>
+ </div><!-- drag container -->
+ <div class="instructions">
+ Content in upper table (table with 1 row) will be shifted to the left after dragging element from upper to the bottom table. Inside event.dropped() handler is JS code that will be executed only in case of dragging from table 0 to table 1. All other movements are ignored.
+ </div>
+
+ </body>
+</html>
View
@@ -0,0 +1,58 @@
+/*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";
+
+// create redips container
+var redips = {};
+
+
+// redips initialization
+redips.init = function () {
+ // set reference to the REDIPS.drag lib and table row
+ var rd = REDIPS.drag,
+ tr = document.getElementById('myRow');
+ // initialization
+ rd.init();
+ // dragged elements can be placed to the empty cells only
+ rd.dropMode = 'single';
+ // event handler executed after DIV element is dropped
+ rd.event.dropped = function () {
+ // get target and source position of dropped DIV element
+ // pos[0] - target table index
+ // pos[3] - source table index
+ var pos = rd.getPosition(),
+ td1, td2, // source and target cell
+ ec, // empty cell
+ i; // local variables
+ // if DIV element is dropped from table 0 to table 1
+ if (pos[3] === 0 && pos[0] === 1) {
+ // loop through cells in myRow
+ for (i = 0, ec = 0; i < tr.cells.length; i++) {
+ // define source and target cells
+ td1 = tr.cells[i];
+ // if cell contains DIV element then shift DIV to the left
+ if (td1.childNodes.length > 0) {
+ // define target cell and move DIV element
+ td2 = tr.cells[i - ec];
+ rd.relocate(td1, td2, 'animation');
+ }
+ // increase number of current empty cells
+ else {
+ ec++;
+ }
+ }
+ }
+ };
+};
+
+
+
+// add onload event listener
+if (window.addEventListener) {
+ window.addEventListener('load', redips.init, false);
+}
+else if (window.attachEvent) {
+ window.attachEvent('onload', redips.init);
+}
View
@@ -0,0 +1,104 @@
+/*
+
+Darko Bunic
+http://www.redips.net/
+Nov, 2012.
+
+*/
+
+body {
+ font-family: arial;
+ margin: 0px; /* for IE6 / IE7 */
+}
+
+
+/* make drag container visible */
+#drag {
+ border: 2px dashed LightBlue;
+ display: table;
+ margin: auto;
+ padding: 3px;
+}
+
+
+
+/* drag objects (DIV inside table cells) */
+.drag {
+ border: 2px solid #367D94;
+ cursor: move;
+ margin: auto;
+ background-color: white;
+ text-align: center;
+ font-size: 25pt;
+ opacity: 0.7;
+ filter: alpha(opacity=70);
+ width: 87px;
+ height: 40px;
+ line-height: 40px;
+ /* round corners */
+ border-radius: 4px; /* Opera, Chrome */
+ -moz-border-radius: 4px; /* FF */
+}
+
+
+/* tables */
+div#drag table {
+ background-color: #eee;
+ border-collapse: collapse;
+}
+ /* table1 (bottom table) */
+ div#drag #table1 {
+ margin-bottom: 20px;
+ }
+ /* table2 (bottom table) */
+ div#drag #table2 {
+ margin: auto;
+ }
+
+
+/* table cells */
+div#drag td,th {
+ border-style: solid;
+ height: 50px;
+ text-align: center;
+ font-size: 10pt;
+ padding: 2px;
+}
+ /* left table - td */
+ div#drag #table1 td{
+ border-width: 0px 2px 0px 0px;
+ border-color: white;
+ }
+
+ /* right table - td */
+ div#drag #table2 td{
+ border-width: 0px 3px 3px 0px;
+ border-color: #DDC5B5;
+ font-weight: normal;
+ }
+
+ /* right table - th */
+ div#drag #table2 th{
+ border-width: 3px 0px 0px 3px;
+ border-color: #DDC5B5;
+ font-weight: normal;
+ }
+
+ /* right table - upper right cell */
+ div#drag #table2 .upper_right{
+ border-width: 0px;
+ }
+
+ /* right table - lower left cell */
+ div#drag #table2 .lower_left{
+ border-width: 0px;
+ }
+
+/* instructions at the bottom */
+.instructions {
+ width: 600px;
+ margin: 15px auto 0px auto;
+ color: #555;
+ font-size: 11px;
+ text-align: justify;
+}
View
@@ -4,26 +4,27 @@
/* enable strict mode */
"use strict";
-// define header_init and default redips_url variable
-var header_init,
- redips_url = redips_url || '/javascript/drag-and-drop-table-content/';
+// define headerInit and default indexURL / redipsURL variable
+var headerInit,
+ redipsURL = redipsURL || '/javascript/drag-and-drop-table-content/',
+ indexURL = indexURL || '../';
// header initialization
-header_init = function () {
+headerInit = function () {
var header = document.createElement('div'),
title = document.title;
// add "header" DIV element
document.body.insertBefore(header, document.body.firstChild);
// apply inner HTML
header.innerHTML = '<div style="background-color:#eee;padding:10px;text-align:center;font-size:20px;font-weight:bold">' + title + '</div>' +
- '<div style="float:left;width:50%;padding-left:10px"><a href="../">Index</a></div>' +
- '<div style="text-align:right;padding-right:10px;margin-bottom:10px"><a href="http://www.redips.net' + redips_url + '">www.redips.net</a></div>';
+ '<div style="float:left;width:50%;padding-left:10px"><a href="' + indexURL + '">Index</a></div>' +
+ '<div style="text-align:right;padding-right:10px;margin-bottom:10px"><a href="http://www.redips.net' + redipsURL + '">www.redips.net</a></div>';
};
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', header_init, false);
+ window.addEventListener('load', headerInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', header_init);
+ window.attachEvent('onload', headerInit);
}
View
@@ -70,7 +70,7 @@ <h3>Drag and drop table content/rows with JavaScript - Version 5.0.0 (<a href="c
<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></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 04<br/><a href="example04/">Tic Tac Toe</a></div></td>

0 comments on commit d3f979f

Please sign in to comment.