Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
113 lines (113 sloc) 6.66 KB
<!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/rows 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="redips-drag-min.js"></script>
<!-- initialize REDIPS.drag library -->
<script type="text/javascript">
// after page is loaded, initialize DIV elements inside table
window.onload = function () {
// reference to the REDIPS.drag library
var rd = REDIPS.drag;
// initialization
rd.init();
// set hover color
rd.hover.colorTd = '#E7C7B2';
// set drop option to 'shift'
rd.dropMode = 'shift';
// set shift mode to vertical2
rd.shift.mode = 'vertical2';
// enable shift animation
rd.shift.animation = true;
// set animation loop pause
rd.animation.pause = 20;
// display action in the message line (list of all event handlers can be found at the drag.js bottom)
rd.event.clicked = function () {document.getElementById('message').innerHTML = 'Element is clicked'}
rd.event.moved = function () {document.getElementById('message').innerHTML = 'Element is moved'}
rd.event.notMoved = function () {document.getElementById('message').innerHTML = 'Element is not moved'}
rd.event.dropped = function () {document.getElementById('message').innerHTML = 'Element is dropped'}
}
</script>
<title>www.redips.net</title>
</head>
<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> / <a href="https://jsfiddle.net/user/dbunic/fiddles/" title="REDIPS.drag examples on jsFiddle">jsFiddle examples</a></h2>
<h3>Drag and drop table content/rows with JavaScript - Version 5.2.1 (<a href="changes.txt">changes</a>)</h3>
</center>
<!-- tables inside this DIV could have draggable content -->
<div id="redips-drag">
<table id="table1">
<!-- define table columns -->
<colgroup>
<col width="240"/>
<col width="240"/>
<col width="240"/>
</colgroup>
<!-- message line -->
<tr>
<th colspan="3" id="message" class="redips-mark" title="Message line">Message line</th>
</tr>
<!-- table data -->
<tr>
<td><div id="link1" class="redips-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="redips-drag t1">Example 10<br/><a href="example10/">Sticky tables</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 20<br/><a href="example20/">Clone and delete table rows</a></div></td>
</tr>
<tr>
<td><div id="link1" class="redips-drag t1">Example 01<br/><a href="example01/">Three tables</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 11<br/><a href="example11/">Drag handle on titlebar</a></div></td>
<td><div id="link1" class="redips-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="redips-drag t1">Example 02<br/><a href="example02/">Green and orange elements</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 12<br/><a href="example12/">Select and move more elements</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 22<br/><a href="example22/">Drag and form details</a></div></td>
</tr>
<tr>
<td><div id="link1" class="redips-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="redips-drag t1">Example 13<br/><a href="example13/">Nested tables</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 23<br/><a href="example23/">Shopping cart</a></div></td>
</tr>
<tr>
<td><div id="link1" class="redips-drag t1">Example 04<br/><a href="example04/">Tic Tac Toe</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 14<br/><a href="example14/">Sort elements in long table</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 24<br/><a href="example24/">Table editor</a></div></td>
</tr>
<tr>
<td><div id="link1" class="redips-drag t1">Example 05<br/><a href="example05/">Scrollable DIV containers</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 15<br/><a href="example15/">Drag and drop table rows</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 25<br/><a href="example25/">Math 4 Kids</a></div></td>
</tr>
<tr>
<td><div id="link1" class="redips-drag t1">Example 06<br/><a href="example06/">Scrollable and fixed containers</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 16<br/><a href="example16/">AJAX, hover, sticky, redips-dragging</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 26<br/><a href="example26/">jQuery dialog</a></div></td>
</tr>
<tr>
<td><div id="link1" class="redips-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="redips-drag t1">Example 17<br/><a href="example17/">Move object (animation)</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 27<br/><a href="example27/">TD content</a></div></td>
</tr>
<tr>
<td><div id="link1" class="redips-drag t1">Example 08<br/><a href="example08/">Tables in separated containers</a></div></td>
<td><div id="link1" class="redips-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="redips-drag t1">Example 28<br/><a href="example28/">Load table content with AJAX</a></div></td>
</tr>
<tr>
<td><div id="link1" class="redips-drag t1">Example 09<br/><a href="example09/">Single and shift mode</a></div></td>
<td><div id="link1" class="redips-drag t1">Example 19<br/><a href="example19/">Groups and table rows</a></div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>