Javascript简单实现可拖动的div

时间:2013-08-20 11:46:37 


<html>
<head>
<script type="text/javascript">
var x;
var y;
function $(id)
{
return document.getElementById(id)
}
function mousedown()
{
x=event.clientX-$("px").style.pixelLeft;
y=event.clientY-$("px").style.pixelTop;
$("px").style.border="2px solid red";
$("px").onmousemove = mousemove;
}
function mouseup()
{
$("px").onmousemove = "";
$("px").style.border="";
}
function mousemove()
{
$("px").style.pixelLeft=event.clientX-x;
$("px").style.pixelTop=event.clientY-y;
}
</script>
</head>
<body>
<div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;"
onmousedown="mousedown()" onmouseup="mouseup()" >
</div>
</body>
</html>
标签:Javascript,div拖动
0
投稿

猜你喜欢

  • 搜索结果页(SERP):前言

    2009-07-22 20:56:00
  • 说说tab设计

    2009-07-26 09:56:00
  • asp实现本周的一周时间列表的代码

    2011-04-06 10:45:00
  • 从xml中获取城市,省份名称

    2008-09-05 15:07:00
  • 方便和实用

    2009-02-02 10:16:00
  • ASP编程入门进阶(十一):Chat聊天程序

    2008-05-12 07:06:00
  • 从"..."看中国的UI设计界的粗糙

    2007-11-21 19:28:00
  • 类似google的ASP分页代码[测试通过]

    2009-03-13 12:43:00
  • asp如何实现网上考试功能?

    2010-05-24 18:32:00
  • 在SQL查询中使用LIKE来代替IN查询的方法

    2011-09-30 11:10:18
  • 记Qzone项目组视觉设计标注的前前后后

    2010-03-24 18:03:00
  • VBScript中LBound函数和UBound函数的用法

    2008-06-27 13:02:00
  • ASP与MySQL的连接[图文教程]

    2010-03-14 11:21:00
  • 减少SQL Server死锁的方法

    2009-01-05 13:49:00
  • IE7 与 IE6 的模式窗口尺寸差异

    2008-03-06 13:49:00
  • 网页设计应急小技巧

    2011-10-05 18:52:57
  • php+mysql查询优化简单实例

    2023-07-21 18:36:32
  • JavaScript中尽量用局部变量的原因[译]

    2009-02-20 13:45:00
  • 经验总结:ASP与存储过程解析

    2008-11-07 13:33:00
  • Java字符串 正则表达式详解

    2023-07-16 12:30:35
  • asp之家 网络编程 m.aspxhome.com