<!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. C# 关键字this用法

    1.this代表当前类的实例对象 public class Test { public string Name{get;set;} public void TestChange(string strN ...

  2. vsCode---进行HTML文件编辑与浏览器运行

    发现vsCode没有明显的绿色三角箭头指示程序运行. 那么想运行一个html文件咋办,可以直接去文件存放地用浏览器打开便可以了. 但是这样也挺麻烦的, 我们需要在vscode里商城搜索两个插件来支持我 ...

  3. 版本控制git第一篇

    一.git的下载与安装 参考:https://blog.51cto.com/wangfeng7399/2352524 Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版 ...

  4. ui学习心得

    软工课上我分配的任务是界面设计,但是对于初期一个ps从没接触的人来说我觉得还是有点困难,所以要从头学起.  PS的功能是什么呢?对于业余爱好者来说,主要还是做一些简单的处理照片.绘图.设计一些皮肤等, ...

  5. RSA加密及加签

    1.对方要求我们的私钥是pkcs8格式,但是实际的公钥没有用pkcs8转换之后的私钥完成,所以是可以不是pkcs8的格式的.我们加签跟格式没有关系. 2.数据格式很重要,to_mpint而非crypt ...

  6. PyCharm基本用法

    1.修改字体 在file->settings下进行修改如下图: 2 修改颜色背景 在file->settings下修改,如图: 3连接git 点击file->settings,选择版 ...

  7. JAVA集合接口及类

    各接口及类关系图 Iterable 所有集合的初始接口,实现该接口可进行foreach操作,只有一个iterator()方法,并返回iterator类型: Iterable在java.lang下,It ...

  8. 获取当前时间并格式化，CTime类

    CTime类,此类应该不是C++标准类库,属于windows封装的关于时间的类库,使用环境应该为 Win32程序,MFC程序,VC++程序 CTime tm = CTime::GetCurrentTi ...

  9. Map、Set、List集合差别及联系详解

    提到集合之前,先说说数组Array和集合的区别:   (1)数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型)   (2)JAVA集合可以存储和操作数目不固定的一组数据. ( ...

  10. 2.常用adb命令的使用

    使用电脑连接手机,查看手机的唯一编号,如果是模拟器,就是显示地址和端口号: adb devices 使用adb安装app应用: adb install apk路径和包名 -r 允许覆盖安装 -s 将a ...