js鼠标拖动(转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<span id="span1"></span></br><span id="span2"></span></br>
<div id="div1" style="background-color: Green; border: 1px solid red; height: 300px;
top: 100px; left: 100px; width: 300px; position: absolute;" onmousedown="mouseDown(this,event)"
onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">
</div>
<script type="text/javascript">
var mouseX, mouseY;
var objX, objY;
var isDowm = false; //是否按下鼠标
function mouseDown(obj, e) {
obj.style.cursor = "move";
objX = div1.style.left;
objY = div1.style.top;
mouseX = e.clientX;
mouseY = e.clientY;
isDowm = true;
}
function mouseMove(e) {
var div = document.getElementById("div1");
var x = e.clientX;
var y = e.clientY;
if (isDowm) {
div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
}
}
function mouseUp(e) {
if (isDowm) {
var x = e.clientX;
var y = e.clientY;
var div = document.getElementById("div1");
div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
document.getElementById("span2").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
mouseX = x;
rewmouseY = y;
div1.style.cursor = "default";
isDowm = false;
}
}
</script>
</body>
</html>
js鼠标拖动(转载)的更多相关文章
- 基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
- js鼠标拖动(转自刘68)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 鼠标左键拖动滚动
鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- JavaScript 实现鼠标拖动元素
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...
- Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三(页面滚屏,模拟鼠标拖动滚动条)
日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...
- 在chrome下鼠标拖动层变文本形状的问题
学JQ也有一段时间了,想自己写个鼠标拖动层移动的效果(很简单,只是为了练习而已)于是就写下了下面的代码 <!DOCTYPE html> <html> <head> ...
- 鼠标拖动DOM
自己收藏,使用angualrjs的directive些的鼠标拖动DOM.... <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- hdu多校第3场C. Dynamic Graph Matching
Problem C. Dynamic Graph Matching Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Tot ...
- C++使用: C++中map的基本操作和用法
在阅读SSD代码中发现作者使用了C++中的map方法,因此搜索该关联式容器的使用方法,在这里一并总结. 一.Map 簡介 Map是STL的一個容器,它提供一對一的hash. 第一個可以稱為關鍵字(ke ...
- Eclipse调试多线程代码
Eclipse调试多线程代码 标签: eclipse 调试 多线程 | 发表时间:2013-02-16 05:51 | 作者:czjuttsw 分享到: 出处:http://blog.csdn.net ...
- 64位win7连接ACCESS报错“Microsoft.Jet.OLEDB.4.0”问题
本人开发了桌面软件,关于事务提醒,自己一直在用,很喜欢,但是在64位win7上无法运行,网上说多种方法,都觉得麻烦.后来自己在vs2012下编译成x86版本,结果可以运行在64位win7下了. 原来如 ...
- H5-移动端实现滑屏翻页-原生js/jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- centos下redis安全相关
博文背景: 由于发现众多同学,在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redis时候 ...
- 最简单的操作 jetty IDEA 【debug】热加载
[博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...
- eclipse工具类及插件(修改eclipse.ini文件及作者名字)
https://jingyan.baidu.com/album/9158e0005633c0a254122807.html?picindex=1 (修改eclipse.ini文件及作者名字) http ...
- converting the moment tensor to strie-dip-rake
在多断层求解的试验中,用到了六个基本矩张量: 而显然,尚不能从图中直接读出strke,dip,rake的值,但有关资料给出了这六个基本矩张量的momet tensor: 而找到一个网站可以方便地将mo ...
- java 集合之set。
Set具有与Collection完全一样的接口,因此没有任何额外的功能,不象前面有两个不同的List.实际上Set就是Collection,只是行为不同.(这是继承与多态思想的典型应用:表现不同的行为 ...