Search and Top Navigation
Ticket #6259: example.html
File example.html, 1.1 KB (added by avuori, November 03, 2010 04:13PM UTC)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$("tbody.sortable").sortable({});
$(".draggable").draggable({
helper: "clone",
connectToSortable: "tbody.sortable"
});
$(".droppable")
.droppable({drop: function () { alert("dropped"); } });
$("td").disableSelection();
});
</script>
<table>
<tbody>
<tr class="draggable ui-state-highlight"><td>Drag me down above the sortable, then quickly drag me up directly over and past the droppable</td></tr>
<tr class="droppable ui-state-highlight"><td>Droppable</td></tr>
</tbody>
<tbody class="sortable">
<tr class="ui-state-default"><td>Item 1</td></tr>
<tr class="ui-state-default"><td>Item 2</td></tr>
<tr class="ui-state-default"><td>Item 3</td></tr>
<tr class="ui-state-default"><td>Item 4</td></tr>
<tr class="ui-state-default"><td>Item 5</td></tr>
</tbody>
</table>
</body>
</html>
Download in other formats:
Original Format
File example.html, 1.1 KB (added by avuori, November 03, 2010 04:13PM UTC)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$("tbody.sortable").sortable({});
$(".draggable").draggable({
helper: "clone",
connectToSortable: "tbody.sortable"
});
$(".droppable")
.droppable({drop: function () { alert("dropped"); } });
$("td").disableSelection();
});
</script>
<table>
<tbody>
<tr class="draggable ui-state-highlight"><td>Drag me down above the sortable, then quickly drag me up directly over and past the droppable</td></tr>
<tr class="droppable ui-state-highlight"><td>Droppable</td></tr>
</tbody>
<tbody class="sortable">
<tr class="ui-state-default"><td>Item 1</td></tr>
<tr class="ui-state-default"><td>Item 2</td></tr>
<tr class="ui-state-default"><td>Item 3</td></tr>
<tr class="ui-state-default"><td>Item 4</td></tr>
<tr class="ui-state-default"><td>Item 5</td></tr>
</tbody>
</table>
</body>
</html>