`
mj4678
  • 浏览: 5502 次
  • 性别: Icon_minigender_1
  • 来自: xian
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

支持拖放并可保存状态的JS代码

阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> New Document </title>
</head>

<body>
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
/*border-top:1px solid #3366cc;*/
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
cursor:move;
color:#7787cc;
/*background: url(image/a2.gif) white;*/

background-color:#e5eef9;
height:18px;
padding-left:0px;
font-weight:bold;
}
#parentTable{

letter-spacing:25px;
}
</style>
<script language="javascript">
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
var draged=false;//初始化,刚开始没有拖动
var mm = null;
var ao = null;
var tdiv=null;//tdiv为NULL,有下文可知tdiv是拖动的那个半透明的咚咚
var ie = window.navigator.userAgent.indexOf("MSIE") != -1;

//拖动开始的函数
function dragStart(ev){

var e = (ev || window.event);

ao= e.srcElement || e.currentTarget;//找到被拖动的咚咚

if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;
/* 如果是TD或者是TR,就找他们的容器,DHTML手册上的描述是(container object that defines the offsetTop and offsetLeft properties of the object)。在这里无论TD还是TR,他们所在的容器都是所在的table*/
else return;//如果不是td和tr,那就不拖动了,直接return结束函数了事
draged=true;//拖动开始,设置环境变量为true
if(mm != null)clearInterval(mm);//清理时间函数
if(tdiv == null)tdiv=document.createElement("div");//创建div,被拖动的咚咚
tdiv.innerHTML=ao.outerHTML;//把table的内容复制到div里边,注意,嵌套table,这个table是td内部有内容的那个
tdiv.style.display="block";
tdiv.style.position="absolute";//设置position为绝对位置,方便坐标定位来拖动
tdiv.style.backgroundColor = "#ffffff";
if(!ie)tdiv.style.MozOpacity = "0.5";
if(ie)tdiv.style.filter="alpha(opacity=70)";//半透明
tdiv.style.cursor="move";//鼠标样式为拖动
tdiv.style.width=ao.offsetWidth;//设定宽度
tdiv.style.height=ao.offsetHeight;//设定高度
tdiv.style.top=getInfo(ao).top;//设定位置
tdiv.style.left=getInfo(ao).left;//设定位置
document.body.appendChild(tdiv);//在body内加入此div
lastX=e.clientX+document.body.scrollLeft;//全局变量,记录事件位置
lastY=e.clientY+document.body.scrollTop;//全局变量,记录事件位置
lastLeft=tdiv.style.left;//全局变量,记录div位置
lastTop=tdiv.style.top;//全局变量,记录div位置


document.onmousemove = draging;
document.onmouseup = dragEnd;


if (ie) {
      e.cancelBubble = true;
      e.returnValue = false;
} else {
      e.preventDefault();
      e.stopPropagation();
}
return false;


}
//拖动函数
function draging(ev){//重要:判断MOUSE的位置
if(!draged)return;//如果没拖动,退出函数

var e = (ev || window.event);

var tX=e.clientX+document.body.scrollLeft;//记录事件位置
var tY=e.clientY+document.body.scrollTop;//记录事件位置
tdiv.style.left=parseInt(lastLeft)+tX-lastX;//计算并移动tdiv
tdiv.style.top=parseInt(lastTop)+tY-lastY;//计算并移动tdiv

var parentTable = $("parentTable");

for(var i=0;i<parentTable.rows[0].cells.length;i++){//循环计算判断tdiv和parentTable的两个TD位置
var parentCell=getInfo(parentTable.rows[0].cells[i]);//getInfo是得到位置的函数,得到TD的位置
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
//判断鼠标是否在TD内部,在内部,就要变换其他的位置了
var subTables=parentTable.rows[0].cells[i].getElementsByTagName("table");//得到TD内部所有的table
if(subTables.length==0){//如果没有table
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
parentTable.rows[0].cells[i].appendChild(ao);//把ao给加进td去
}
break;//如果加进去后,就不用循环了。注:此时拖动尚未结束,是拖动中,table位置的变化
}
for(var j=0;j<subTables.length;j++){//如果有table,还要判断他们的位置
var subTable=getInfo(subTables[j]);//的到table位置
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){//判断位置
parentTable.rows[0].cells[i].insertBefore(ao,subTables[j]);//加入到此table之前
break;
}else{
parentTable.rows[0].cells[i].appendChild(ao);//如果位置在td的最下方,则加入到最后。注:此时拖动尚未结束,是拖动中,table位置的变化
}
}
}
}

if (ie) {
      e.cancelBubble = true;
      e.returnValue = false;
} else {
      e.preventDefault();
      e.stopPropagation();
}
return false;

}
//拖动结束的函数
function dragEnd(ev){

if(!draged)return;//如果没拖动,退出函数

var parentTable = $("parentTable");

//保存顺序
for(var i=0;i<parentTable.rows[0].cells.length;i++){//循环计算判断tdiv和parentTable的两个TD位置
var subTables = parentTable.rows[0].cells[i].getElementsByTagName("table");
for(var j=0;j<subTables.length;j++){
if(subTables[j].id)setcookievalue(subTables[j].id, i + " " + j);
}
}

var e = (ev || window.event);

mm=ff(150,15);//恢复位置,就是把div缓缓移动到ao的位置

draged=false;//结束拖动,设置变量为false

document.onmousemove = null;
document.onmouseup = null;

if (ie) {
      e.cancelBubble = true;
      e.returnValue = false;
} else {
      e.preventDefault();
      e.stopPropagation();
}
return false;

}

//很easy,不说了
function getInfo(o){//取得坐标
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
o=o.offsetParent;
}
to.right=to.left+twidth;
to.bottom=to.top+theight;
to.toString=function(){return to.left+":"+to.right+":"+to.top+":"+to.bottom};
return to;
}

function ff(aa,ab){//从GOOGLE网站来,用于恢复位置
var ac=parseInt(getInfo(tdiv).left);//得到div的位置
var ad=parseInt(getInfo(tdiv).top);//得到div的位置
var ae=(ac-getInfo(ao).left)/ab;//计算要移动的长度
var af=(ad-getInfo(ao).top)/ab;//计算要移动的长度
return setInterval(function(){if(ab<1){//当移动结束的时候
if(mm!= null)clearInterval(mm);//清理时间函数
mm = null;
if(tdiv != null)document.body.removeChild(tdiv);
//tdiv.removeNode(true);//去掉div
ao=null;//把全局变量ao设为Null
return//结束时间函数
}
//如果移动没有结束
ab--;
ac-=ae;
ad-=af;
//计算此次移动的目的点
tdiv.style.left=parseInt(ac)+"px";
tdiv.style.top=parseInt(ad)+"px"
//移动div
}
,aa/ab)//注意,这个aa/bb是setInterval的第二个参数,时间参数
}


function getcookievalue(sname){
var svalue="";
var sname=sname+"=";
if(document.cookie.length>0){
offset=document.cookie.indexOf(sname);
if(offset!=-1){
offset+=sname.length;
end=document.cookie.indexOf(";",offset);
if(end==-1)end=document.cookie.length;
svalue=unescape(document.cookie.substring(offset,end))
}
}
return svalue;
}

function setcookievalue(sname,svalue){
var expire="";
expire=new Date((new Date()).getTime()+31536000);
expire="; expires="+expire.toGMTString()+"; path=/";
document.cookie=sname+"="+escape(svalue)+expire;
}

function $(en){
      try{
          var el = document.getElementById(en);
          if(el)return el;
          return false;
      }catch(e){
          return false;
      }
}

if(window.HTMLElement) {
      HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
          var r=this.ownerDocument.createRange();
          r.setStartBefore(this);
          var df=r.createContextualFragment(sHTML);
          this.parentNode.replaceChild(df,this);
          return sHTML;
          });

      HTMLElement.prototype.__defineGetter__("outerHTML",function(){
       var attr;
          var attrs=this.attributes;
          var str="<"+this.tagName.toLowerCase();
          for(var i=0;i<attrs.length;i++){
              attr=attrs[i];
              if(attr.specified)
                  str+=" "+attr.name+'="'+attr.value+'"';
              }
          if(!this.canHaveChildren)
              return str+">";
          return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
          });
      
HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
switch(this.tagName.toLowerCase()){
              case "area":
              case "base":
           case "basefont":
              case "col":
              case "frame":
              case "hr":
              case "img":
              case "br":
              case "input":
              case "isindex":
              case "link":
              case "meta":
              case "param":
              return false;
          }
          return true;

       });
}

//给table们加上事件
function inint(){//初始化
var parentTable = $("parentTable");

for(var i=0;i<parentTable.rows[0].cells.length;i++){//循环计算判断tdiv和parentTable的两个TD位置
var subTables = parentTable.rows[0].cells[i].getElementsByTagName("table");
for(var j=0;j<subTables.length;j++){
if(subTables[j].className!="dragTable")continue;
subTables[j].rows[0].className="dragTR";
subTables[j].rows[0].onmousedown = dragStart;
}
}


var ao = null;
var ob = new Array;
var len = 0;

var gmail = getcookievalue("gmail");

if(gmail){
      if(!isNaN(gmail.split(" ")[0])){
          len = ob.length || 0;
          ob[len] = new Object();
          ob[len].id="gmail";
          ob[len].cells = gmail.split(" ")[0];
          ob[len].index = gmail.split(" ")[1];
      }
}

var xlty = getcookievalue("xlty");
if(xlty){
      if(!isNaN(xlty.split(" ")[0])){
          len = ob.length || 0;
          ob[len] = new Object();
          ob[len].id="xlty";
          ob[len].cells = xlty.split(" ")[0];
          ob[len].index = xlty.split(" ")[1];
      }
}

var zd = getcookievalue("zd");
if(zd){
      if(!isNaN(zd.split(" ")[0])){
          len = ob.length || 0;
          ob[len] = new Object();
          ob[len].id="zd";
          ob[len].cells = zd.split(" ")[0];
          ob[len].index = zd.split(" ")[1];
      }
}

var zgczx = getcookievalue("zgczx");
if(zgczx){
      if(!isNaN(zgczx.split(" ")[0])){
          len = ob.length || 0;
          ob[len] = new Object();
          ob[len].id="zgczx";
          ob[len].cells = zgczx.split(" ")[0];
          ob[len].index = zgczx.split(" ")[1];
      }
}

for(var i = 0; i < ob.length - 1; i ++){
      for(var j = i + 1; j < ob.length; j ++){
          if(ob[i].index > ob[j].index){
              var temp = ob[i];
              ob[i]=ob[j];
              ob[j]=temp;
          }
      }
}


for(var i = 0; i < ob.length; i ++){
      ao = $(ob[i].id);
      subTables = parentTable.rows[0].cells[ob[i].cells].getElementsByTagName("table");
      if(subTables.length && ob[i].index < subTables.length){
          parentTable.rows[0].cells[ob[i].cells].insertBefore(ao,subTables[ob[i].index]);
      }else{
          parentTable.rows[0].cells[ob[i].cells].appendChild(ao);
      }
}

}

</script>


<body >
<div id="content-top" style="background-color:#33FFFF "></div>
<table width="812" height=601 border="0" align="center" cellpadding="0" cellspacing="2" id="parentTable">
<tr >
<td width="263" valgin="top">

<table width="263" border=0 cellspacing="0" class="dragTable" style="border:1px solid #D5D5D5" id="gmail">
<tr>
<td height="25" colspan="2" >GMAIL</td>
</tr>
<tr>
<td width="118" height="190"><img src="Image/peo01.jpg" width="100%" height="90%">
</td>
<td width="139">暂时无法显示GMAIL内容</td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0" style="border:1px solid #D5D5D5" id="xlty">
<tr>
<td>新浪体育</td>
</tr>
<tr>
<td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步
印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭</td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0" style="border:1px solid #D5D5D5" id="zd">
<tr>
<td height="20">焦点</td>
</tr>
<tr>
<td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选
解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »</td>
<tr>
</table>
</td>
<td width="594"><table width="100%" border=0 cellpadding="0" cellspacing="0" class="dragTable" id="zgczx">
<tr>
<td width="2%"><img src="Image/ww_1.jpg" width="12" height="25"></td>
<td width="90%" height="25" > 中关村在线</td>
<td width="8%" valign="top" ><img src="Image/ww_3.jpg" width="45" height="25"></td>
</tr>
<tr>
<td colspan="3"><table width="100%" border="0" align="center" cellpadding="2" cellspacing="2" style="border:1px solid #D5D5D5">
<tr >
<td bgcolor="#FFFFFF" >新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元 </td>
</tr>
<tr >
<td bgcolor="#FFFFFF" > </td>
</tr>
</table></td>
<tr>
</table></td>
</tr>
</table>


<script language="JavaScript">
<!--
inint();
//-->
</script>
</body>
</html>
分享到:
评论

相关推荐

    【原创】Gridview拖放排序,并保存到服务端

    3. **事件处理**:编写JavaScript代码来监听拖放事件,当用户完成拖放操作时,更新排序标识,并通过AJAX向服务器发送请求。 4. **服务器端处理**:在服务器端,接收AJAX请求,解析新的排序信息,更新数据库中对应的...

    html5图片拖放

    2. 监听拖放事件:通过JavaScript代码添加事件监听器,处理各个阶段的事件。 3. 处理数据传输:在`dragstart`事件中,设置`dataTransfer`对象,可以将图片的URL或Blob对象附加到`dataTransfer`。 4. 控制拖放行为...

    jquery sortable排序之后的保存状态效果代码.zip

    标题"jquery sortable排序之后的保存状态效果代码.zip"表明这是一个包含示例代码的压缩包,这些代码展示了如何在使用jQuery Sortable进行排序后,保存并恢复列表的状态。这通常涉及到用户自定义排序顺序的保存和加载...

    拖拽页面布局(可保存状态)

    在“可保存状态”的实现上,通常需要后端支持或者利用浏览器的本地存储机制,如localStorage或sessionStorage。当用户调整了布局后,可以通过JavaScript将当前布局的状态(包括每个元素的位置和大小)序列化为JSON...

    html代码 自动生成表单代码 可以拖拽

    在这个工具中,`index.html`是主入口文件,`form_builder`可能是一个包含表单构建功能的核心模块,`js`目录存放JavaScript源代码,`javascript`可能是单独的JavaScript文件,`css`目录则用于存放样式表文件,而`...

    jQuery网格布局图片自由拖动排序代码

    4. **JavaScript事件处理**:关键的JavaScript代码可能在`js`目录下的文件中。这里主要关注`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标释放)事件,这些事件组合起来可以实现拖放功能。当...

    支持拖拽上传的JS文件上传代码SimpleAjaxUploader.js

    而SimpleAjaxUploader.js是一款强大的JavaScript库,它提供了支持拖拽上传和传统点击上传的功能,极大地提升了用户体验。本文将深入探讨如何利用这个库在项目中实现高效、便捷的文件上传。 1. **SimpleAjaxUploader...

    仿云盘图片拖放上传

    根据所使用的后端语言(如PHP、Node.js等),解析接收到的FormData对象,保存文件到服务器的指定位置,并返回确认信息。 7. **前端反馈**: 服务器返回成功响应后,在前端更新状态,显示上传成功的图片或文件名,...

    JS交互式办公室座位排座代码.zip

    此外,为了便于二次修改,代码结构应该是模块化的,各个功能(如座位生成、拖放操作、保存与加载布局)被封装成独立的函数或类。这样的设计有利于代码的维护和扩展,例如添加新的功能,如预订系统、搜索功能或与其他...

    jQuery可拖动网格布局排列代码.zip

    "jQuery可拖动网格布局排列代码"就是一款利用jQuery库结合gridster.js插件实现的高效解决方案,旨在提供一个可自定义、可拖动的网格布局系统。这篇文章将深入探讨这一技术的实现原理和应用。 首先,jQuery作为一款...

    拖动并保存位置

    标题“拖动并保存位置”涉及的是Web交互中的一个常见功能,允许用户通过拖放操作来改变元素的位置,并且这种改变能够被系统记住,通常通过Cookie技术实现。在这个场景下,用户界面的可定制性和用户体验得到了提升,...

    html5拖拽图片调整截图代码.zip

    例如,我们可以为图片元素添加`draggable="true"`属性使其可拖动,并在拖放事件中处理坐标和元素状态。 CSS(Cascading Style Sheets)在图像拖放中主要负责样式设置,比如设置拖动时的透明度、边框等视觉效果。...

    基于threejs的在线3D场景编辑器使用mongodb保存3D模型和场景数据

    标题中的“基于threejs的在线3D场景编辑器使用mongodb保存3D模型和场景数据”指的是一款使用Three.js库构建的Web应用程序,允许用户在浏览器中创建、编辑和保存3D场景。Three.js是JavaScript的一个强大库,专门用于...

    多个拖放文件上传的jQuery插件.zip

    标题 "多个拖放文件上传的jQuery插件.zip" 暗示了这是一个基于JavaScript库jQuery的文件上传解决方案,特别强调了支持多个文件同时上传和拖放功能。在现代Web开发中,这种功能常用于提高用户体验,让用户能够方便...

    从igoogle上down下来的拖曳代码 实现拖曳布局保存到数据库

    igoogle是Google的一个个性化主页服务,允许用户自定义布局,这个拖曳代码可能是用于实现类似功能的JavaScript或HTML5代码,用户可以自由调整页面元素的位置,并能保存这些布局到数据库中。 【描述解读】 描述中...

    jQuery EasyUI Portal 保存拖动位置,仿谷歌DashBoard效果的

    总之,通过结合jQuery EasyUI Portal组件和数据持久化技术,我们可以创建一个具有自定义布局和拖放保存位置功能的用户界面,类似于谷歌Dashboard。在实际应用中,这将极大地提升用户体验,让个性化设置变得更加便捷...

    深入浅出Ext JS(第2版)随书光盘源码

    7. **状态管理**:Ext JS 提供了状态管理功能,可以保存和恢复用户界面的状态。你可以通过代码了解如何启用和使用这一特性。 8. **工具栏和菜单**:创建自定义的工具栏和下拉菜单是构建用户界面的重要部分。源码中...

    可做拼图游戏的鼠标拖拽图片更换位置js代码

    接着,`js`文件夹内应该包含实现拖拽功能的JavaScript代码。这个脚本可能包括以下几个关键部分: 1. **选择图片**:当用户点击某张图片时,脚本会添加一个虚线边框以表示选中状态。这通常通过改变图片的CSS样式或...

    原生js在线编辑excel表格代码.zip

    在这个场景中,我们关注的是一个名为"原生js在线编辑excel表格代码.zip"的压缩包,它包含了一个利用原生JavaScript实现的在线Excel表格编辑功能的插件。这个插件允许用户在网页上直接对Excel表格进行编辑,而无需...

    购物车_企业城微信小程序js代码前台前端H5页面源码.rar

    4. **购物车逻辑**:购物车系统包括添加商品、删除商品、修改数量、计算总价、保存购物车状态等功能。在前端,这部分通常涉及JavaScript的DOM操作和事件监听;在后端,可能涉及数据库操作和服务器API接口设计。 5. ...

Global site tag (gtag.js) - Google Analytics