<!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>

js鼠标拖动（转自刘68）的更多相关文章

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

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

  2. js鼠标拖动（转载）

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

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

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

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

  8. 鼠标拖动DOM

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

  9. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

随机推荐

  1. 关于WinIO.DLL的键盘输入模拟

    关于WinIO.DLL的键盘输入模拟 最近在找键盘模拟的方式,最后在网上找到了一个WinIO.DLL的IO键盘模拟按键的方式.但是居然那个方法是有问题的.我造了全局的hook监视键盘信息,发现它只是有 ...

  2. 详解HTTP中GET与POST的区别，不是你看过的标准答案！

    防吐槽声明:本文适合程序员新人,自认阅文无数.技术超叼的大神不用看. GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含 ...

  3. ununtu16.04+python3+selenium+firefox环境搭建

    一.初始配置: 1.安装完系统并配置好地址及DNS.2.设置root密码: sudo passwd root 3.更改云源: sudo cp /etc/apt/sources.list /etc/ap ...

  4. POJ 2253 Frogger （Dijkstra变型)

    题意:求点1到点2的路径中,权值最大的那条边,其最小值是多少. 分析:最大值最小化.可以将迪杰斯特拉模板中的松弛操作加以修改,在O(n^2)的时间内解决该问题.其中需要注意的是,dist[i]指的是: ...

  5. Java乐观锁的实现原理（案例）

    简要说明: 表设计时,需要往表里加一个version字段.每次查询时,查出带有version的数据记录,更新数据时,判断数据库里对应id的记录的version是否和查出的version相同.若相同,则 ...

  6. docker安装部署PHP nginx

    sudo tee /etc/yum.repos.d/docker.repo <<-'EOF' [dockerrepo] name=Docker Repository baseurl=htt ...

  7. svn如何给新文件加锁

    第一步: 右键subversion(版本控制) 第二部:找到 subversion properties 第二部: add进行添加

  8. 深入解析Koa之核心原理

    这篇文章主要介绍了玩转Koa之核心原理分析,本文从封装创建应用程序函数.扩展res和req.中间件实现原理.异常处理的等这几个方面来介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参 ...

  9. php上传文件后无法移动到指定目录的解决

    从浏览器访问而触发PHP脚本运行的用户是 apache 用户 无法移动文件的原因主要是目标目录没有写入权限 1.将目标目录权限设置为 777 #chmod 777 tar_dir 2.将目标目录用户和 ...

  10. iOS开发小结 - 关于swift中#if DEBUG判断不执行的解决方案

    在以前的OC项目中我们经常用#if DEBUG来判断是否是在DEBUG模式下调试代码,然后最近我用swift写的项目中发现#if DEBUG判断居然不管用了,多方查证为果的情况下终于找到了解决方案,希 ...