Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: a9c2634d2e
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 118 lines (116 sloc) 3.145 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
<!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 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">
var redips_url = '/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>
<script type="text/javascript" src="script.js"></script>
<title>Example 20: Clone and delete table rows</title>
</head>
<body>
<!-- tables inside this DIV could contain drag-able content -->
<div id="drag">
<table id="tbl1">
<colgroup>
<col width="30"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
</colgroup>
<tbody>
<tr>
<th colspan="6" class="mark">Table 1</th>
</tr>
<tr class="rd">
<td class="rowhandler"><div class="drag row"></div></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="rl">
<td class="rowhandler"><div class="drag row"></div></td>
<td></td>
<td></td>
<td class="cdark"><div class="drag orange">drop</div></td>
<td></td>
<td></td>
</tr>
<tr class="rl">
<td class="rowhandler"><div class="drag row"></div></td>
<td></td>
<td class="cdark"><div class="drag blue">and</div></td>
<td></td>
<td class="cdark"><div class="drag blue">table</div></td>
<td></td>
</tr>
<tr class="rl">
<td class="rowhandler"><div class="drag row"></div></td>
<td class="cdark"><div class="drag orange">Drag</div></td>
<td></td>
<td></td>
<td></td>
<td class="cdark"><div class="drag orange">rows</div></td>
</tr>
<tr class="rd">
<td class="rowhandler"><div class="drag row"></div></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" class="mark"><span id="msg">Message line</span></td>
</tr>
</tbody>
</table>

<table id="tbl2">
<colgroup>
<col width="30"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
</colgroup>
<tbody>
<tr>
<th colspan="6" class="mark">Table 2</th>
</tr>
<tr class="rd">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

<table>
<colgroup>
<col width="100"/>
</colgroup>
<tbody>
<tr>
<td class="trash">Trash</td>
</tr>
</tbody>
</table>
</div>
<!-- instructions -->
<div class="inst">
Clone elements and table rows with SHIFT key
</div>
</body>
</html>
Something went wrong with that request. Please try again.