前台页面代码 [提示：只需把信息替换成你要绑定的数据即可，代码里网络图片是测试加载用]
============================================================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>拖动模块</title>
<style>
.dragTable
{
background-color:#DBE5CF;
position:relative;
}
.dragTableHeader
{
cursor:move;
}
body,td,th {
font-size: 12px;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: underline;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var a = document.getElementById("loading");
a.parentNode.removeChild(a);
}
document.write('<div id="loading" style="background:#CC4444;color:#FFF;width:80px;padding-left:5px;position:absolute;line-height:22px;font-size:12px">正在读取...</div>');
</script>
<script language="javascript" type="text/javascript" src="go.js"></script>
<script defer>
document.οnmοusemοve=MouseMoveToMove;
document.οnmοuseup=MouseUpToMove;
</script>
</head>
<body>
<br />
<form id="Form1" runat="server">
<div align="center">
<input type="button" id="save" value="保存修改" style="visibility: hidden; width: 80%;
height: 30px; border-color: #AFD781; background-color: #ffffff; border-style: double;
border-width: 1px" οnclick="saveFun()"></div>
<br />
<table width="80%" border="0" cellpadding="5" cellspacing="1" bgcolor="#AFD781" align="center">
<tr>
<td valign="top" style="width: 25%; background-color: #ffffff; height: 135px;">
<input type="hidden" name="tableName" value="空间-------1">
<table border="0" cellpadding="5" cellspacing="1" width="100%" class="dragTable"
οnmοuseοver="MouseOverFun(this);">
<tr>
<input type="hidden" name="tableName" value="体育新闻">
<td bgcolor="#AFD781" class="dragTableHeader" οnmοusedοwn='MouseDownToMove(this)'>
体育新闻</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<u><font color="red">体育新闻信息 </font></u>
</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="1" width="100%" class="dragTable"
οnmοuseοver="MouseOverFun(this);">
<tr>
<input type="hidden" name="tableName" value="焦点信息">
<td bgcolor="#AFD781" class="dragTableHeader" οnmοusedοwn='MouseDownToMove(this)'>
焦点信息</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<u><font color="red">焦点新闻信息 </font></u>
</td>
</tr>
</table>
<table width="100%" οnmοuseοver="MouseOverFun(this);" style="position: relative;
background-color: White">
<tr>
<td>
</td>
</tr>
</table>
</td>
<td width="50%" valign="top" style="height: 135px; background-color: #ffffff">
<input type="hidden" name="tableName" value="空间-------2">
<table border="0" cellpadding="5" cellspacing="1" width="100%" class="dragTable"
οnmοuseοver="MouseOverFun(this);">
<tr>
<input type="hidden" name="tableName" value="娱乐新闻">
<td bgcolor="#AFD781" class="dragTableHeader" οnmοusedοwn='MouseDownToMove(this)'>
娱乐新闻</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<u><font color="red">娱乐新闻信息 </font></u>
</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="1" width="100%" class="dragTable"
οnmοuseοver="MouseOverFun(this);">
<tr>
<input type="hidden" name="tableName" value="国际新闻">
<td bgcolor="#AFD781" class="dragTableHeader" οnmοusedοwn='MouseDownToMove(this)'>
国际新闻</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<u><font color="red">国际新闻信息 </font></u>
</td>
</tr>
</table>
<table width="100%" οnmοuseοver="MouseOverFun(this);" style="position: relative;
background-color: White">
<tr>
<td>
</td>
</tr>
</table>
</td>
<td valign="top" style="width: 25%; background-color: #ffffff; height: 135px;">
<input type="hidden" name="tableName" value="空间-------3">
<table border="0" cellpadding="5" cellspacing="1" width="100%" class="dragTable"
οnmοuseοver="MouseOverFun(this);">
<tr>
<input type="hidden" name="tableName" value="实事新闻">
<td bgcolor="#AFD781" class="dragTableHeader" οnmοusedοwn='MouseDownToMove(this)'>
实事新闻</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<u><font color="red">实事新闻信息</font></u>
</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="1" width="100%" class="dragTable"
οnmοuseοver="MouseOverFun(this);">
<tr>
<input type="hidden" name="tableName" value="农民新闻">
<td bgcolor="#AFD781" class="dragTableHeader" οnmοusedοwn='MouseDownToMove(this)'>
农民新闻</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<u><font color="red">农民新闻信息 </font></u>
</td>
</tr>
</table>
<table width="100%" οnmοuseοver="MouseOverFun(this);" style="position: relative;
background-color: White">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<div align="center">
<img src="http://www.wallcoo.com/human/hongkong_wallpaper_1024/mxxx01/%5Bwallcoo_com%5D_hongkong_wallpaper_0164.jpg"
style="border: 3px solid #AFD781;" width="80%" /></div>
<br />
</form>
</body>
</html>
<script>
function saveFun()
{
var tableNameObjs=document.getElementsByName("tableName");
var tempStr="";
for(var i=0;i<tableNameObjs.length;i++)
{
tempStr +="\n"+tableNameObjs[i].value;
}
alert(tempStr);
}
</script>
============================================================================
脚本go.js代码 [提示：复制保存成go.js文件，与页面放置一个文件夹下即可]
============================================================================
var beginMoving=false;
var sourceObj=null;
var dragTableHeader=null;
var tipDiv=null;
var allDragTables=new Array();
function MouseDownToMove(obj){
if((event.button&1)==0) return;
sourceObj=obj.offsetParent;
sourceObj.style.zIndex=10;
sourceObj.mouseDownY=event.clientY;
sourceObj.mouseDownX=event.clientX;
beginMoving=true;
dragTableHeader=obj;
dragTableHeader.setCapture();
document.getElementById("save").style.visibility="visible";
}
function MouseMoveToMove(obj){
if(!beginMoving) return;
sourceObj.style.top = (event.clientY-sourceObj.mouseDownY);
sourceObj.style.left = (event.clientX-sourceObj.mouseDownX);
setTipDivPosition();
}
function MouseUpToMove(obj){
if(!beginMoving) return;
dragTableHeader.releaseCapture();
sourceObj.style.top=0;
sourceObj.style.left=0;
sourceObj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",20);
}
function MouseOverFun(obj){
if (tipDiv==null) {
tipDiv=document.createElement("<div style='border:1px solid blue'>");
}
obj.insertAdjacentElement("beforeBegin",tipDiv);
if(obj==sourceObj) return;
}
function swapFun(){
if(sourceObj!=null) tipDiv.insertAdjacentElement("afterEnd",sourceObj);
sourceObj=null;
}
function setTipDivPosition(){
var allTables=document.getElementsByTagName("table");
for(var i=0;i<allTables.length;i++){
if(allTables[i]==sourceObj) continue;
if(allTables[i].className=="dragTable" && isMouseInBox(allTables[i])){
allTables[i].insertAdjacentElement("beforeBegin",tipDiv);
return;
}
}
sourceObj.insertAdjacentElement("beforeBegin",tipDiv);
}
function isMouseInBox(obj){
var point1=new Array(event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop);
var point2=getObjPosition(obj);
return( (point1[0]>=point2[0]) && point1[1]>=point2[1] && point1[0]-point2[0]<=obj.offsetWidth && point1[1]-point2[1]<=obj.offsetHeight )
}
function getObjPosition(obj){
var point=new Array(0,0);
while(obj!=document.body){
point[0]+=obj.offsetLeft;
point[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return point;
}
扫一扫
5287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
