jquery，div层拖动，排序

来源：互联网发布：中国足球知乎编辑：程序博客网时间：2024/06/05 10:04

<head id="Head1" runat="server">
<title></title>
<script src="../js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="js/ui.core.js" type="text/javascript"></script>
<script src="js/ui.sortable.js" type="text/javascript"></script>
<style type="text/css">
.style1
{
  float:left;
}

.ui-icon ui-icon-arrowthick-2-n-s
{
  background-color:Blue;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#sortable").sortable({
stop: function () {
var newsort = $(this).sortable("toArray");
$.post("ajax.aspx", { sortid: newsort, "action": "OrderTodayBest" }, function (data) {
if (data != "ok") {
alert('出问题了，联系技术人员');
}

});
}
});

$("#ok").click(function () {
location.href = "ShowBest.aspx";
});
});
function RemoveToday() {
var arr = new Array();
$(".AllBest[@type=checkbox] :checked").each(function (i) {
arr[i] = $(this).val();
});
if (arr == "") {
dialog(arr, [
{ val: "", className: "x", title: "木有选择", text: ""}]);
}
else {
$.post("ajax.aspx", { arr: arr.toString(), "action": "RemoveOutToday" }, function (data) {
if (data == "ok") {
for (var j = 0; j < arr.length; j++) {
$("#" + arr[j]).remove();
$("#" + arr[j]).hide();
}
dialog(data, [
{ val: "ok", className: "v", title: "操作成功", text: ""}]);

}
else if (data == "fail") {
dialog(data, [
{ val: "fail", className: "x", title: "操作失败", text: ""}]);
}
});
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="sortable" class="AllBest">
<li class="ui-state-default" id="1">
<span class="ui-icon ui-icon-arrowthick-2-n-s style1"></span>
<div class="style1" style="width: 100px; height:20px;">aaaaaaaaaaaaaaaaaa</div>
<div style="clear:both;"></div>
</li>
<li class="ui-state-default" id="2">
<span class="ui-icon ui-icon-arrowthick-2-n-s style1"></span>
<div class="style1" style="width: 100px; height:20px;">bbbbbbbbbbbbbbbbbbb</div>
<div style="clear:both;"></div>
</li>
<li class="ui-state-default" id="3">
<span class="ui-icon ui-icon-arrowthick-2-n-s style1"></span>
<div class="style1" style="width: 100px; height:20px;">cccccccccccccccccc</div>
<div style="clear:both;"></div>
</li>
<div style="clear:both;"></div>
</ul>
</div>
</form>
</body>