Skip to content

Instantly share code, notes, and snippets.

@jefflarkin

jefflarkin/JQuery Sortable Searialize

Created February 7, 2009 22:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jefflarkin/60065 to your computer and use it in GitHub Desktop.
Save jefflarkin/60065 to your computer and use it in GitHub Desktop.
Download ZIP
Sample code using JQuery Sortable lists. I've fixed my mistake, the code below should now work.
Raw
JQuery Sortable Searialize
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#sortable ul {
list-style: none;
display: inline;
padding: 0;
margin-left: 0;
position: absolute;
}
#sortable ul li {
list-style: none;
padding: 0;
margin-left: 0;
display: inline;
height: 60px;
width: 60px;
}
#sortable li:first-child {
list-style: none;
padding: 0;
margin: 0;
display: block;
height: 250px;
width: 250px;
}
#sortable li:first-child img{
height: 250px;
width: 250px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){$("#pics").sortable({
cursor:"move",
update: function(){
var order = $("#pics").sortable("serialize");
$("#info").text("Now:" + order);}})});
</script>
</head>
<body>
<div id="sortable">
<ul id="pics">
<li id="pic_1"><img src="http://gravatar.com/avatar/1?s=250" width="50" height="50"/>One</li>
<li id="pic_2"><img src="http://gravatar.com/avatar/1?s=250" width="50" height="50"/>Two</li>
<li id="pic_3"><img src="http://gravatar.com/avatar/1?s=250" width="50" height="50"/>Three</li>
</ul>
</div>
<div id="info"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment