萬盛學電腦網 >> 腳本專題 >> javascript >> jquery實現的鼠標拖動排序Li或Table
jquery實現的鼠標拖動排序Li或Table
這篇文章主要介紹了使用jquery實現的鼠標拖動排序Li或Table,需要的朋友可以參考下
1、前端頁面
代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖動排序Li或Table.aspx.cs" Inherits="拖動排序Li或Table" %>
<!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 id="Head1">
<title>廣告管理 </title>
<link href="Styles/css.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.sortable.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
//添加廣告
function addlinks() {
editWidget("PhoneArticleListPageInsOrUp.aspx");
}
</script>
<script type="text/javascript">
$(function () {
$('.sortable').sortable({ cursor: 'move' });
});
</script>
<script type="text/javascript">
//編輯
function editlink(prefix, aftfix, obj) {
editWidget("PhoneArticleListPageInsOrUp.aspx?ID=" + obj);
}
</script>
<script type="text/javascript">
function getsortresult(prefix, aftfix) {
var flag = document.getElementById("" + prefix + "_sortable_" + aftfix + "");
if (flag) {
var result = $("#" + prefix + "_sortable_" + aftfix + "").sortable('toArray');
$(":button").attr("disabled", "disabled"); $(":submit").attr("disabled", "disabled");
$("#delay_" + prefix + "_" + aftfix + "").show();
$("#normal_" + prefix + "_" + aftfix + "").hide();
$.ajax({
url: "PhoneArticleListPage_2.aspx?word=" + result,
cache: false,
success: function (html) {
$("#delay_" + prefix + "_" + aftfix + "").hide();
$("#normal_" + prefix + "_" + aftfix + "").show();
$(":button").removeAttr("disabled"); $(":submit").removeAttr("disabled");
}
});
alert(flag);
alert("手機文章列表排列順序保存成功！");
}
else {
alert("沒有需要排序的手機文章列表！");
return false;
}
}
</script>
<script type="text/javascript">
//刪除廣告
function deletelink() {
if (confirm("您確定刪除您剛才選中的項嗎?")) {
var s = document.getElementsByName("checkbox");
var s2 = "";
for (var i = 0; i < s.length; i++) {
if (s[i].checked) {
s2 += s[i].value + ',';
}
}
location.href = "PhoneArticleListPage_2.aspx?Del_Id=" + s2; //這裡傳過去的是已逗號分隔開的id，需要在後面的頁面內取出
}
}
</script>
<style type="text/css">
.sortable
{
margin: 0;
padding: 0;
}
.sortable li
{
margin: 3px 8px 3px 0;
float: left;
}
.sortable li
{
width: 250px;
height: 170px;
}
</style>
</head>
<body>
<form method="post" action="PhoneArticleListPage_2.aspx" id="form1">
<table class="TABLE1 fn-table fn-table-mouse" align="center">
<tr>
<td width="50%">
<input name="AdSave" type="button" id="AdSave" class="btn" onclick="getsortresult('sitelinks','text')"
value="保存順序" />
</td>
<td width="50%" align="right">
提示：按住鼠標拖動鏈接，之後單擊保存按鈕就可以完成對鏈接的排列
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center" style="background-color: #F6F6F6;">
<div id="tabs">
<div id="tabs-sitelinks-text">
<div id="normal_sitelinks_text">
<ul class="sortable" id="sitelinks_sortable_text">
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left"
id="sitelinks_text_96">
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%;
height: 170px; table-layout: fixed; word-wrap: break-word;">
<tr style="height: 20px;">
<td width="30%" align="left" valign="top">
<input type="checkbox" name="checkbox" value="96" />
</td>
<td width="70%" height="10px" align="left">
<a href="javascript:void(0)" onclick="editlink('sitelinks','text','96')"><font color="#CC3333">[編輯]</font>
</a>
</td>
</tr>
<tr>
<td>
<b>文章標題:</b>
</td>
<td>
法國時代復分大占地方
</td>
</tr>
<tr>
<td>
<b>列表圖片:</b>
</td>
<td>
<img width="100" height="50px" src='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312023422.jpg '
alt='法國時代復分大占地方' />
</td>
</tr>
<tr>
<td>
<b>文章URL:</b>
</td>
<td>
<a href='http://www.uzai.com/trip/27879.html?46400284' target="_blank">http://www.uzai.com/trip/27879.html?46400284</a>
</td>
</tr>
</table>
</li>
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left"
id="sitelinks_text_78">
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%;
height: 170px; table-layout: fixed; word-wrap: break-word;">
<tr style="height: 20px;">
<td width="30%" align="left" valign="top">
<input type="checkbox" name="checkbox" value="78" />
</td>
<td width="70%" height="10px" align="left">
<a href="javascript:void(0)" onclick="editlink('sitelinks','text','78')"><font color="#CC3333">[編輯]</font>
