jquery实现的鼠标拖动排序Li或Table

2020-05-17 06:20:23易采站长站整理

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 ‘