Search and Top Navigation
Ticket #3545: testcase.html
File testcase.html, 1.0 KB (added by Jo-W, November 06, 2008 02:27PM UTC)
UI Sortable testcase, requires jquery.js and jquery.ui.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sortable testcase</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<style type="text/css">
.item {
width: 200px;
height: 50px;
margin: 10px;
background-color: grey;
font-size: 30px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$("#item-list").sortable(
{
opacity: 0.7,
revert: true,
handle: $(".item"),
cursor: "move",
placeholder: "item"
});
});
</script>
</head>
<body>
<p>requires files: jquery.js, jquery.ui.js</p>
<div id="item-list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
Download in other formats:
Original Format
File testcase.html, 1.0 KB (added by Jo-W, November 06, 2008 02:27PM UTC)
UI Sortable testcase, requires jquery.js and jquery.ui.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sortable testcase</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<style type="text/css">
.item {
width: 200px;
height: 50px;
margin: 10px;
background-color: grey;
font-size: 30px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$("#item-list").sortable(
{
opacity: 0.7,
revert: true,
handle: $(".item"),
cursor: "move",
placeholder: "item"
});
});
</script>
</head>
<body>
<p>requires files: jquery.js, jquery.ui.js</p>
<div id="item-list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>