javascript拖动小例子
新客网 XKER.COM 2008-10-07 来源： 收藏本文
<html>
<head>
<meta http-equiv="Content" content="text/html;chartset=utf-8">
<title>test drag</title>
<style type="text/css">
<!--
.drag {
width:100px;
height:100px;
position:absolute;
left:10px;
top:10px;
background-color:blue;
}
-->
</style>
<script type="text/javascript">
<!--
function drag(target,event)
{
var deltaX = event.clientX-parseInt(target.style.left);
var deltaY = event.clientY-parseInt(target.style.top);
document.attachEvent("onmousemove",movehandle);
document.attachEvent("onmouseup",uphandle);
function movehandle()
{
target.style.left = event.clientX-deltaX;
target.style.top = event.clientY-deltaY;
}
function uphandle()
{
document.detachEvent("onmousemove",movehandle);
document.detachEvent("onmouseup",uphandle);
}
}
-->
</script>
</head>
<body>
<div id="drag1" class="drag" style="left:10px;top:10px;background-color:red;" onmousedown="drag(this,event);" >show me you 2</div>
<div id="drag" class="drag" onmousedown="drag(this,event);" style="left:10px;top:10px;">show me you</div>
</body>
</html>
<head>
<meta http-equiv="Content" content="text/html;chartset=utf-8">
<title>test drag</title>
<style type="text/css">
<!--
.drag {
width:100px;
height:100px;
position:absolute;
left:10px;
top:10px;
background-color:blue;
}
-->
</style>
<script type="text/javascript">
<!--
function drag(target,event)
{
var deltaX = event.clientX-parseInt(target.style.left);
var deltaY = event.clientY-parseInt(target.style.top);
document.attachEvent("onmousemove",movehandle);
document.attachEvent("onmouseup",uphandle);
function movehandle()
{
target.style.left = event.clientX-deltaX;
target.style.top = event.clientY-deltaY;
}
function uphandle()
{
document.detachEvent("onmousemove",movehandle);
document.detachEvent("onmouseup",uphandle);
}
}
-->
</script>
</head>
<body>
<div id="drag1" class="drag" style="left:10px;top:10px;background-color:red;" onmousedown="drag(this,event);" >show me you 2</div>
<div id="drag" class="drag" onmousedown="drag(this,event);" style="left:10px;top:10px;">show me you</div>
</body>
</html>
标签：javascript 拖动
最新相关文章- ·JavaScript学习笔记 4-循环 Loops
- ·JavaScript学习笔记 3-框架
- ·JavaScript学习笔记 2-变量、字符串
- ·JavaScript学习笔记 1-入门
- ·JavaScript利用ActiveX导出Excel,Word
- ·使用 JavaScript 获取 table 行号和列号
- ·javascript拖动小例子
- ·javaScript实现checkbox多项选择
- ·Javascript对url进行编码的几个函数
- ·关于Javascript定义函数和this使用的两点注意的地
- ·javascript获取随机整数
- ·mshtml：javascript为HTML文件中的Select添加opti
- ·重新载入javascript文件的方法(给js定个id)
- ·不要忘了为你的JavaScript命名
发表评论
评论内容：不能超过250字，需审核后才会公布，请自觉遵守互联网相关政策法规。
【重要声明】：新客网刊载此文仅为提供更多信息的目的，并不代表新客网同意文章的说法或描述，也不构成任何建议，对本文有任何异议，请在上面提出建议。
- 阅读排行
- 推荐阅读
- 随机推荐
- JavaScript常用检测脚本
- 如何用javascript控制上传文件的大小
- JavaScript中split函数使用方法
- JavaScript方法和技巧大全
- Ext2.0 form使用实例
- JavaScript对象与数组参考大全
- js关于document和window对象
- JS实现无刷新联动菜单（select）的方法
- 用JavaScript刷新框架子页面的方法
- 解决JavaScript页面刷新与弹出窗口问题
- JS实现Flash外链专题大图片的轮显效果
- javascript版的日期输入控件
- Javascript刷新框架及页面的方法总集
- 用Javascript 实现的Dual listbox
- 搜索引擎页面分析中的 javascript 处理
- 专题教程
- 实用信息