博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript实现可以拖动的层示例(层拖动,兼容IE/FF)
阅读量:4679 次
发布时间:2019-06-09

本文共 1319 字,大约阅读时间需要 4 分钟。

临时写的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head>
<style type="text/css">
#main div{position:absolute;width:220px;height:150px;border:1px solid #999;}
</style>
<script type="text/javascript">
var a;
document.οnmοuseup=function(){if(!a)return;document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);a="";};
document.οnmοusemοve=function (d){if(!a)return;if(!d)d=event;a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";};
function $(o,e){a=o;document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);b=e.clientX-parseInt(a.style.left);c=e.clientY-parseInt(a.style.top);}
</script>
</head>
<body>
  <div id="main">
    <div style="left:100px;top:100px;background:#fc9;" οnmοusedοwn="$(this,event)">1</div>
    <div style="left:400px;top:100px;background:#9cf;" οnmοusedοwn="$(this,event)">2</div>
    <div style="left:700px;top:100px;background:#f9c;" οnmοusedοwn="$(this,event)">3</div>
    <div style="left:100px;top:300px;background:#9fc;" οnmοusedοwn="$(this,event)">4</div>
    <div style="left:400px;top:300px;background:#c9f;" οnmοusedοwn="$(this,event)">5</div>
    <div style="left:700px;top:300px;background:#cf9;" οnmοusedοwn="$(this,event)">6</div>
  </div>
</body>
</html>

转载于:https://www.cnblogs.com/shuang121/archive/2011/11/10/2244431.html

你可能感兴趣的文章
无线网络国际会议排名
查看>>
PERSONAL VALUES
查看>>
python文件操作
查看>>
java虚拟机的运行原理
查看>>
配置Oracle10g即时客户端plsql的配置
查看>>
关于设计:Actionscript 有关鼠标事件笔记2
查看>>
【LOJ】#2538. 「PKUWC2018」Slay the Spire
查看>>
Helper
查看>>
架构设计系列-前端模式的后端(BFF)翻译PhilCalçado
查看>>
常用dos命令
查看>>
Redis学习第四课:Redis List类型及操作
查看>>
满血复活前的记录(持续更新ing)
查看>>
vs2008使用过AnkhSVN后不能绑定到vss的问题解决
查看>>
在vue中使用sass
查看>>
IPv4组播通信原理
查看>>
Sql Server 新的日期类型
查看>>
“我爱淘”冲刺阶段Scrum站立会议8
查看>>
js获取元素class的几种方法
查看>>
delphi 枚举类型与字符串的转换
查看>>
UVA-10689 Yet another Number Sequence (矩阵二分幂模板)
查看>>