具备兼容性的拖动代码
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
特点: author:misshjn homepage:http://happyshow.org date:2007-04-30 拖动开始 */ function _getstyle(element,styleprop){ if (element.currentstyle){ var y = element.currentstyle[styleprop]; }else if (window.getcomputedstyle){ var y = document.defaultview.getcomputedstyle(element,null).getpropertyvalue(styleprop.replace(/([a-z])/g,"-$1").tolowercase()); } return y; } function _elementonmousedown(evt,blockid){ var obj, temp; obj=document.getelementbyid(blockid); var x = evt.clientx ││ evt.pagex; var y = evt.clienty ││ evt.pagey; obj.startx=x-obj.offsetleft; obj.starty=y-obj.offsettop; var d = document.createelement("div"); d.style.position = "absolute"; d.style.width = obj.clientwidth + parseint(_getstyle(obj,"borderleftwidth"),10) + parseint(_getstyle(obj,"borderrightwidth")) -2 + "px"; d.style.height = obj.clientheight + parseint(_getstyle(obj,"bordertopwidth"),10) + parseint(_getstyle(obj,"borderbottomwidth")) -2 + "px"; d.style.border = "1px dashed #666"; d.style.top = _getstyle(obj,"top"); d.style.left = _getstyle(obj,"left"); d.style.zindex = "9999"; document.body.appendchild(d); document.onmousemove=function(evt){ d.style.left= (evt?evt.pagex:event.clientx) - obj.startx + "px"; d.style.top= (evt?evt.pagey:event.clienty) - obj.starty + "px"; }; document.onmouseup=function(){ var objl = parseint(_getstyle(obj,"left"),10); var objt = parseint(_getstyle(obj,"top"),10); var obj2l = parseint(d.style.left,10); var obj2t = parseint(d.style.top,10); var todolist = []; var level = 10; //元素移动从起点到终点之间过渡的级数,大于0的整数 var speed = 10; //毫秒,每次移动的间隔时间,数字越大,动画感越强,但跳跃感也越大 for (i=1; i<=level; i++){ todolist.push(function(t){ settimeout(function(){ obj.style.left = objl + (obj2l-objl)*(t/level) + "px"; obj.style.top = objt + (obj2t-objt)*(t/level) + "px"; if(t==i)todolist=null; },speed*arguments[0]); }); } for (i=1; i<=level; i++){ todolist[i-1](i); } document.body.removechild(d); document.onmousemove = null; document.onmouseup = null; }; } /* 拖动结束 */ 网友评论 [li] ann说: 天哪,昨天tianya.cn来我的博客访问居然有120次~!! 原来我贴了百度空间图片上去,没有显示,可能有些人找到属性,直接到我博客欣赏了,嘻嘻,无心插柳柳成荫.(2007-05-11 09:51:03)[/li] [li] mantou说: 拖动到窗口最边缘的时候就会出错了。。。(2007-05-26 17:27:37)[/li] [li] skyakira说: 增加一个 document.onselectstart=function(){ returnfalse; } 可以防止拖动时选中文字; 结束的时候 document.onselectstart=null;(2007-06-11 13:46:16)[/li] [li] skyakira说: d.style.width=obj.clientwidth parseint(_getstyle(obj,"borderleftwidth"),10) parseint(_getstyle(obj,"borderrightwidth"))-2 "px"; d.style.height=obj.clientheight parseint(_getstyle(obj,"bordertopwidth"),10) parseint(_getstyle(obj,"borderbottomwidth"))-2 "px"; 在页面内容很多的时候这两句话错误;没找到具体原因,而且页面内容多了,那个过度的效果基本看不出来; 还有就是经常移动的div会粘到鼠标上,单独测试的时候没任何问题; 引用这个之前引用了prototype.js' mail:sky.zhao.crm[at]gmail.com(2007-06-11 13:58:45)[/li] [li] skyakira说: if($("linediv")) { document.body.removechild($("linediv")); } vard=document.createelement("div"); d.setattribute("id","linediv"); d.style.position="absolute"; 增加了虚框存在的判断,防止鼠标滑出页面以后,导致事件丢失,无法取消虚框的问题;(2007-06-11 17:18:04)[/li] [li] skyakira说: d.style.cursor="move"; 继续增加一个样式,使鼠标在虚框移动时保持移动状态; mail:sky.zhao.crm[at]gmail.com(2007-06-12 09:08:54)[/li] [li] 安静说: happyshow 网页改版啦~~恭喜一下快乐笛子~~一如继往支持你哦,大哥.(2007-06-19 16:46:21)[/li] [code] 该文章在 2010/4/30 17:09:08 编辑过 |
关键字查询
相关文章
正在查询... |