LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

具备兼容性的拖动代码

admin
2010年4月30日 17:7 本文热度 7426

特点:
1、兼容 ie6、ff、opear(ie7还没有机会测试)
2、拖动流畅
3、起点与终点之间有过渡,使移动更平滑(可调)

演示

/*
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] new document
Title
可拖动的窗口
coded by misshjn
www.happyshow.org
[/code]

该文章在 2010/4/30 17:09:08 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved