<!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鼠标拖动（转载）的更多相关文章

  1. 基于js鼠标拖动图片排序

    分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...

  2. js鼠标拖动（转自刘68）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 鼠标左键拖动滚动

    鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...

  4. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  6. JavaScript 实现鼠标拖动元素

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...

  7. Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）

    日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...

  8. 在chrome下鼠标拖动层变文本形状的问题

    学JQ也有一段时间了,想自己写个鼠标拖动层移动的效果(很简单,只是为了练习而已)于是就写下了下面的代码 <!DOCTYPE html> <html> <head> ...

  9. 鼠标拖动DOM

    自己收藏,使用angualrjs的directive些的鼠标拖动DOM.... <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. Flask之勾子,错误捕获以及模板语法

    请求勾子 在客户端和服务器交互的过程中,有些准备工作或扫尾工作需要处理,比如: 在请求开始时,建立数据库连接: 在请求开始时,根据需求进行权限校验: 在请求结束时,指定数据的交互格式: 为了让每个视图 ...

  2. 『Numpy』内存分析_利用共享内存创建数组

    引.内存探究常用函数 id(),查询对象标识,通常返回的是对象的地址 sys.getsizeof(),返回的是 这个对象所占用的空间大小,对于数组来说,除了数组中每个值占用空间外,数组对象还会存储数组 ...

  3. 『TensorFlow』0.x_&_1.x版本框架改动汇总

    基本数值运算 除法和模运算符(/,//,%)现在匹配 Python(flooring)语义.这也适用于 [tf.div] 和 [tf.mod].要获取基于强制整数截断的行为,可以使用 [tf.trun ...

  4. BOM&DOM

    BOM(浏览器对象模型) 1. location相关 . location.href 获取当前url . location.href="http://www.sogo.com" 跳 ...

  5. 微服务架构演变过程-SpringCloud

  6. PDF 补丁丁 0.6.0.3282 版发布（修复内存漏洞）

    补丁丁的新测试版修复了旧版在导出图片.分析文件结构时的内存漏洞. 对于希望表达对本软件感情的用户,可点击“帮助”菜单的“关于本程序及作者”命令,用微信扫描里面的二维码表达您的谢意. 新的测试版正在制作 ...

  7. java 创建string对象机制 字符串缓冲池 字符串拼接机制 字符串中intern()方法

    字符串常量池:字符串常量池在方法区中 为了优化空间,为了减少在JVM中创建的字符串的数量,字符串类维护了一个字符串池,每当代码创建字符串常量时,JVM会首先检查字符串常量池.如果字符串已经存在池中,就 ...

  8. sqlserver查询当前库下，一张表的表名，字段名，字段类型，字段长度

    sqlserver版: 查询当前数据库下所有表名: select * from sys.tables; 查询当前库下,一张表的表名,字段名,字段类型,字段长度: select a.name 表名,b. ...

  9. js--变量对象总结

    当 JavaScript 代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution context). 对于每个执行上下文,都有三个重要属性: 变量对象( ...

  10. Windows系统,Tensorflow的Tensorboard工具细节问题

    随着跟着TensorFlow视频学习,学到Tensorboard可视化工具这里的时候. 在windows,cmd里面运行,tensorboard --logdir=你logs文件夹地址  这行代码,一 ...