jQuery sortable Div's
Posted
by
kai lange
on Stack Overflow
See other posts from Stack Overflow
or by kai lange
Published on 2011-01-19T19:29:34Z
Indexed on
2012/09/22
15:37 UTC
Read the original article
Hit count: 319
is it possible to sort direct between two or more div's/boxe's and return the complete data (var order = ...) ?
Online Demo: http://jsbin.com/alegu4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 10px;
}
ul {
margin: 0;
}
#s1,#s2 {
float: left;
width: 400px;
}
#s1 li,#s2 li {
list-style: none;
margin: 0 0 4px 0;
padding: 10px;
background-color:#00CCCC;
border: #CCCCCC solid 1px;
color:#fff;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#s1 ul,#s2 ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
//$.post("updateDB.php", order);
alert(order);
}
});
});
});
</script>
</head>
<body>
<div id="box">
<div class="box" id="s1">
<ul>
<li id="recordsArray_1">1. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_2">2. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_3">3. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_4">4. Lorem ipsum dolor sit amet, consetetur</li>
</ul>
</div>
<div class="box" id="s2">
<ul>
<li id="recordsArray_5">5. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_6">6. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_7">7. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_8">8. Lorem ipsum dolor sit amet, consetetur</li>
</ul>
</div>
</div>
</body>
</html>
Please note it's not the same like my other post - thanks!
© Stack Overflow or respective owner
