简要咨询 咨询QQ 网站导航 网站搜索 手机站点 联系我们
搜公告
  • 搜公告
  • 搜职位
118bet金博宝下载
事业单位
首 页
118bet金博宝
188app金宝搏
特岗教师
三支一扶
银行招聘
选调遴选
学历升学
118bet金博宝下载
全站导航
当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目
拖动层并定位
来源： 阅读：884 次 日期：2016-06-30 09:54:19
温馨提示： 小编为您整理了“拖动层并定位”,方便广大网友查阅！

<!doctype html public -//w3c//dtd html 4.01 transitional//en

>

<html>

<head>

<meta http-equiv=content-type content=text/html; charset=gb2312>

<title>drag layer</title>

<style>

body,table{color:#000000;

font-size:12px;

}

div.div_one{}

.dragbar{color:#ffffff;

font-weight:bold}

</style>

<script language=javascript defer>

/*written by joelee@51js

*/

var tmpelement=null;

var dragelement=null;

var downx,downy,tmp_o_x,tmp_o_y;

var refelement=null;

var dragactive=0;

var draging=0;

function readydrag(){

dragactive=1;

if(event.srcelement.tagname!=div)

return;

dragelement=event.srcelement.parentnode;

tmpelement=dragelement.clonenode(true);

tmpelement.style.filter=alpha(opacity=90);

tmpelement.style.zindex=2;

dragelement.style.zindex=1;

tmpelement.style.position=absolute;

if(dragelement.parentnode.tagname!=body){

dragelement.style.left=dragelement.offsetleft+dragelement.parentnode.style.pixelleft;

dragelement.style.top=dragelement.offsettop+dragelement.parentnode.style.pixeltop;

}

downx=event.clientx;

downy=event.clienty;

tmp_o_x=dragelement.style.pixelleft;

tmp_o_y=dragelement.style.pixeltop;

tmpelement.style.visibility=hidden;

document.body.appendchild(tmpelement);

document.onmousemove=startdrag;

}

document.onmouseup=enddrag;

function startdrag(){

if(dragactive==1&&event.button==1&&dragelement!=null&&tmpelement!=null){

tmpelement.style.visibility=visible;

tmpelement.style.left=tmp_o_x+event.clientx-downx;

tmpelement.style.top=tmp_o_y+event.clienty-downy;

dragelement.style.backgroundcolor=#cccccc;

document.body.style.cursor=move;

draging=1;

}

}

function enddrag(){

if(dragactive==1&&tmpelement!=null){

if(draging==1){

dragelement.removenode(true);

draging=0;

}

tmpelement.style.filter=alpha(opacity=100);

tmpelement.style.zindex=1;

document.body.style.cursor=default;

if(refelement!=null&&refelement.parentnode!=null&&refelement.parentnode.tagname!=body){

tmpelement.style.width=refelement.parentnode.style.width;

tmpelement.style.position=;

refelement.parentnode.insertbefore(tmpelement,refelement);

}

}

dragelement=null;

tmpelement=null;

dragactive=0;

}

function readyinsert(){

if(dragactive==1){

var element=event.srcelement;

if(element==dragelement)return;

if(element.tagname!=div)

return;

if(element.classname==dragbar||element.classname==textsheet||element.classname==blankbar)

element=element.parentnode;

element.style.backgroundcolor=#cccccc;

element.style.filter=alpha(opacity=50);

refelement=element;

}

}

function failinsert(){

var element=event.srcelement;

if(element.tagname!=div)

return;

try{

if(element.classname==dragbar||element.classname==textsheet||element.classname==blankbar)

element=element.parentnode;

}catch(e){}

element.style.filter=alpha(opacity=100);

element.style.backgroundcolor=#ffffff;

refelement=null;

}

document.onselectstart=function(){return false}

</script>

</head>

<body>

<div id=div_one class=div_one style=position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>

<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>window</div>

<div class=textsheet style=border:1px solid #996666;>content<br>

content<br>

content<br>

content <br>

</div>

<div class=blankbar style=height:10px></div></div>

<div id=grid1 style=position:absolute; left:534px; top:37px; width:336px; height:15px; z-index: 100; visibility: visible;>

<div style=height:20px;z-index:2; onmouseover=readyinsert() onmouseout=failinsert();>把层拖动到这儿</div>

</div>

<div id=grid2 style=position:absolute; left:20px; top:40px; width:494px; height:15px; z-index: 100; visibility: visible;>

<div style=height:20px;z-index:2; background-image:url() onmouseover=readyinsert() onmouseout=failinsert();>把层拖动到这儿</div>

</div>

<div id=div_one class=div_one style=position:absolute; left:204px; top:277px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>

<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>bbs</div>

<div class=textsheet style=border:1px solid #996666;>content</div>

<div class=blankbar style=height:10px></div>

</div>

<div id=div_one class=div_one style=position:absolute; left:561px; top:195px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>

<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>log</div>

<div class=textsheet style=border:1px solid #996666;>content<br>

content<br>

content <br>

content<br>

</div>

<div class=blankbar style=height:10px></div>

</div>

<div id=div_one class=div_one style=position:absolute; left:438px; top:74px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>

<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>worker</div>

<div class=textsheet style=border:1px solid #996666;>content</div>

<div class=blankbar style=height:10px></div>

</div>

<div id=div_one class=div_one style=position:absolute; left:206px; top:406px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>

<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>tools</div>

<div class=textsheet style=border:1px solid #996666;>content</div>

<div class=blankbar style=height:10px></div>

</div>

</body>

</html>

更多信息请查看脚本栏目
【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】 【点此处查询各地各类考试咨询QQ号码及交流群】
上一篇：js实现下拉框具有输入功能的方法
下一篇：使用iisftp.vbs删除ftp站点
手机网站地址：拖动层并定位
由于各方面情况的不断调整与变化， 提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读脚本栏目
Bottle框架中的装饰器类和描述符应用详解10月30日
Python探索之SocketServer详解10月30日
Python探索之实现一个简单的HTTP服务器10月30日
python探索之BaseHTTPServer-实现Web服务器介绍10月30日
13个最常用的Python深度学习库介绍10月30日
深入理解Python中的*重复运算符10月30日
python logging日志模块详解10月30日
System表空间不足的报警问题浅析10月22日
Android开发自定义TextView省略号样式的方法10月22日
MySQL 清除表空间碎片的实例详解10月22日
Ubuntu下MySQL安装及配置远程登录教程10月22日
Python 2.x如何设置命令执行的超时时间实例10月22日
windows 64位下redis安装教程10月22日
Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果10月22日
浅谈Node Inspector 代理实现10月22日
java web开发之购物车功能实现示例代码10月22日
Android开发中GridView用法示例10月22日
Django ORM框架的定时任务如何使用详解10月22日
SpringMail使用过程中的报错解决办法10月22日
Android 使用自定义RecyclerView控件实现Gallery效果10月22日
移动网站

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
最新信息
2024年瑞恒保险经纪有限责任公司第一批社会招聘公告
2024年西双版纳州勐腊县卫生监督所招聘协管员面谈及面试安排事宜通告
2024年保山市昌宁县中医医院第3次编外合同制人员招聘公告
2024年11月保山市昌宁县退役军人事务局招聘公益性岗位人员公告
2024年11月昆明市盘龙区汇承中学招聘教师公告
2025年中共景东彝族自治县委党校急需紧缺人才招聘公告
2024年红河州开远市教体系统事业单位第二轮急需紧缺人才招聘公告
2024年昆明市晋宁区农业农村局招聘编外聘用工作人员公告
2024年玉溪市重点产业服务中心选调工作人员公告
2025年国考楚雄考区笔试温馨提示
公考类
云南公务员 贵州公务员 四川公务员 广西公务员 各省公务员 国家公务员 选调遴选
招聘类
188app金宝搏 特岗教师 三支一扶 志 愿 者 银行招聘 国企招聘
各类考试
学历升学 职业资格 外语考试 医学考试 工程考试 教师资格
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号：滇ICP备2023014141号-1 云南省教育厅备案号：云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证：（云）人服证字（2023）第0102001523号
云南网警备案专用图标
联系电话：0871-65317125（9:00—18:00） 获取招聘考试信息及咨询关注公众号：
咨询QQ：526150442（9:00—18:00）版权所有:
云南网警报警专用图标
Baidu
map