js鼠标拖动(转自刘68)
<!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=" 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>
最新文章
- windows系统如何添加ssh key到github
- An Introduction to Interactive Programming in Python (Part 1) -- Week 2_3 练习
- Hibernate,JPA注解@OneToMany_Map
- 微软TechEd2013大会门票热卖!
- Android 创建单例模式的几种方法
- 【ContestHunter】【弱省胡策】【Round2】
- MapSearch 阅读随笔
- 转载StringBuilder说明
- android studio 9.png 报错
- 4.2 PCIe体系结构的组成部件
- app个推(透传消息)
- Python数据科学“冷门”库
- Python协程(真才实学,想学的进来)
- 微软BI 之SSIS 系列 - 在 SSIS 输出平面文件时根据运行日期生成不同的文件名称
- Eclipse使用Maven创建Web时错误:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webap
- OpenGL ES 2.0 Shader 调试新思路(二): 做一个可用的原型
- C#远程执行Linux系统中Shell命令和SFTP上传文件
- Redis数据类型之Set(四)
- 【BZOJ】1669: [Usaco2006 Oct]Hungry Cows饥饿的奶牛(lis)
- oracle dump的使用心得