<!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. 牛客小白月赛12 I 华华和月月逛公园 Tarjan算法求隔边

    题目链接:https://ac.nowcoder.com/acm/contest/392/I 题意:给你一个连通的无向图,问图的隔边有多少条 输入:N,M分别是点数和边数 之后M行每行两个正整数u,v ...

  2. CentOS7下swap分区创建(添加),删除以及相关配置

    在添加swap分区之前我们可以了解下当前系统swap是否存在以及使用情况,可用: 1. free –h 或 swapon –s 了解硬盘使用情况(一般/dev/vda1为挂载硬盘): 1. df –h ...

  3. javascript高级程序设计第3版——第一章概括

    最近发现Xmind思维导图是个好东西,刚好开始看书,被用来归纳最好不过了

  4. 【转】.Net Core中的Api版本控制

    原文链接:API Versioning in .Net Core 作者:Neel Bhatt 简介 Api的版本控制是Api开发中经常遇到的问题, 在大部分中大型项目都需要使用到Api的版本控制 在本 ...

  5. css清除常用默认样式表

    /*公共样式*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, ...

  6. tensorFlow（五）深层神经网络

    TensorFlow基础见前博客 上实例: MNIST 数据集介绍 MNIST 是一个手写阿拉伯数字的数据集. 其中包含有 60000 个已经标注了的训练集,还有 10000 个用于测试的测试集. 本 ...

  7. ActiveMQ使用介绍及实例

    上一篇讲了rabbitmq的使用以及demo,activemq的思路也与之有相似的地方. activemq是基于Java实现的.activemq没有rabbitmq那么多的路由规则,其通信方式只有两种 ...

  8. 2. Net、ASP.Net、C#、VisualStudio之间的关系

    .Net一般指的是.NetFramework 是一个开发和运行环境,是框架, 提供了基础的.Net类.这些类可以被任何一种.Net编程语言调用,.NetFramework还提供了CLR,JIT,GC等 ...

  9. dyne*cm and N*m

  10. 为何放弃Eclipse，选择IntelliJ IDEA，看完终于明白了

    如果你初次用idea,毫无目的的度娘如何使用IDEA     浪费的将会是大量的时间.一套让你花时间,少走弯路的视频教程(下载地址:https://pan.baidu.com/s/1gfeX3hD) ...