<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit demo</title>
<script src="min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="ckeditor/adapters/jquery.js"></script>
<style>
ul li {
min-width: 200px;
}
.dragging li.ui-state-hover {
min-width: 240px;
}
.dragging .ui-state-hover a {
color:green !important;
font-weight: bold;
}
th,td {
text-align: right;
padding: 2px 4px;
border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
cursor: move;
}
.connectedSortable tr:first-child {
cursor: default;
}
.ui-sortable-placeholder {
background: yellow;
}
</style>
<script>
$(document).ready(function() {
/* $("#table-draggable1 tbody tr").draggable({
appendTo:"body",
helper:"clone"
});*/
$('#table-draggable1 tbody').sortable({
stop : function() {
console.log('fdds');
},
});
});
</script>
</head>
<body>
<table id='table-draggable1'>
<tbody class="connectedSortable">
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
<tr>
<td>1</td>
<td >668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>2</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>3</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>4</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>6</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>7</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
</tbody>
</table>
<table id='table-draggable2'>
<tbody class="connectedSortable1">
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
<tr>
<td>1</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>2</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>3</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>4</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>6</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
<tr>
<td>7</td>
<td>668</td>
<td>100.95</td>
<td>1.82</td>
</tr>
</tbody>
</table>
</body>
</html>
Saturday, April 4, 2015
Drag & Drop Table row
Labels:
Jquery
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment