Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 036856af28
Fetching contributors…

Cannot retrieve contributors at this time

114 lines (114 sloc) 6.018 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.color_td = '#E7C7B2';
// set drop option to 'shift'
rd.drop_option = 'shift';
// set shift mode to vertical2
rd.shift_option = 'vertical2';
// enable animation on shifted elements
rd.animation_shift = 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.myhandler_clicked = function () {document.getElementById('message').innerHTML = 'Element is clicked'}
rd.myhandler_moved = function () {document.getElementById('message').innerHTML = 'Element is moved'}
rd.myhandler_notmoved = function () {document.getElementById('message').innerHTML = 'Element is not moved'}
rd.myhandler_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></h2>
<h3>Drag and drop table content/rows with JavaScript - Version 4.6.19 (<a href="changes.txt">changes</a>)</h3>
</center>
<!-- tables inside this DIV could have draggable content -->
<div id="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="mark" title="Message line">Message line</th>
</tr>
<!-- 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 08<br/><a href="example08/">Tables in separated containers</a></div></td>
<td><div id="link1" class="drag t1">Example 16<br/><a href="example16/">AJAX, hover, sticky, dragging</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 09<br/><a href="example09/">Single and shift mode</a></div></td>
<td><div id="link1" class="drag t1">Example 17<br/><a href="example17/">Move object (animation)</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 10<br/><a href="example10/">Sticky tables</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>
</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 11<br/><a href="example11/">Drag handle on titlebar</a></div></td>
<td><div id="link1" class="drag t1">Example 19<br/><a href="example19/">Groups and table rows</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 12<br/><a href="example12/">Select and move more elements</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 05<br/><a href="example05/">Scrollable DIV containers</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 21<br/><a href="example21/">Shift table content</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 14<br/><a href="example14/">Sort elements in long table</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 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 15<br/><a href="example15/">Drag and drop table rows</a></div></td>
<td><div id="link1" class="drag t1">Example 23<br/><a href="example23/">Shopping cart</a></div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.