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 ...
随机推荐
- SQL SERVER 查看sql语句性能与执行时间
[方法一] set statistics profile on set statistics io on set statistics time on go --sql语句 go set statis ...
- CSS font-family字体大合集
在写文字内容占大篇幅的页面是,总是会面临着改变字体的需求,以下为font-family常用合集以及一部分文字效果: windows常见内置中文字体 字体中文名 字体英文名 ...
- 2015-10-15 css3
图片模糊效果 <img id ="img1" src="image/免费学PS.jpg" style="-webkit-filter: blur ...
- CAD小小调整，复制生成二层5.28
1.栏杆剖切索引:“符号标注”“索引符号",填写文字,标注效果: 2,台阶剖切索引:填写文字,标注效果: 3.符号标注:图名标注: 4一层平面图完成.复制生成二层平面,把图名改为”二层平面图 ...
- react 表单获取多个input
react 表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...
- Saiku调用WS接口（十四）
Saiku调用WS接口 关于saiku集成系统单点登录告一段落,始终没想好怎么去做,主要是因为saiku有自己的权限定义,一直没想好关于saiku本身的权限信息以及用户信息怎么处理(在这里笔者希望已实 ...
- powerdesigner（数据设计工具）
https://jingyan.baidu.com/album/4f7d57120468c91a2019279f.html?picindex=1 (摘抄 原网地址)
- Java基础-访问修饰符
访问修饰符 default (即缺省,什么也不写): 在同一包内可见,不使用任何修饰符.使用对象:类.接口.变量.方法. private : 在同一类内可见.使用对象:变量.方法. 注意:不能修饰类( ...
- neutron之neutron_openvswitch_agent占用100%CPU资源问题
基于kolla-ansible部署的queens版本,基于docker stats查看openstack的资源占用,发现neutron_openvswitch_agent一直占用100%CPU资源,这 ...
- Alpha冲刺8
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10023260.html 作业博客:https://edu.cnblogs.com/campus ...