鼠标拖放div 实现
Javascript的mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动1个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。
例如，接下来的一个例子就演示了如何综合应用各种鼠标事件来实现页面元素拖放操作的设计过程。在实现拖放操作的设计过程中，需要理清和解决以下几个问题：
- 定义拖放元素为绝对定位，以及设计事件的响应过程。这个实现比较容易。
- 清楚几个坐标概念：按下鼠标时的指针坐标，移动过程中当前鼠标的指针坐标，松开鼠标时的指针坐标，目标被拖动元素的元素坐标，拖动过程中的目标元素坐标。
- 算法设计：按下鼠标时，获取目标被拖动元素和鼠标指针的坐标位置，在移动过程中实时计算鼠标偏移的距离，并利用该偏移距离加上目标被拖动元素的原始坐标位置，获得目标被拖动元素的实时坐标位置。
如上图所示，其中变量ox和oy分别记录按下鼠标时目标被拖动元素的纵横坐标值，它们可以通过事件对象的offsetLeft和offsetTom属性获取。变量mx和my分别表示按下鼠标时，鼠标指针的坐标位置。而event.mx和event.my则是事件对象的自定义属性，用它们来存储当鼠标发生移动时鼠标指针的实时坐标位置。
当获取了上面3对坐标值之后，就可以动态计算目标被拖动元素的实时坐标位置，即x轴值为ox+event.mx-mx，y轴为oy+event.my-my。当松开鼠标时，则可以释放事件类型，并记录松开鼠标时鼠标指针拖动目标元素的坐标值，以及鼠标指针的位置，留待下一次做拖动操作时调用。
那么，整个鼠标拖动目标元素的操作示例代码如下：
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript鼠标移动(mousemove)事件</title>
<link href="css.css" rel="stylesheet" media="screen" type="text/css" />
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="box">
<div id="title">对话框标题</div>
</div>
</body>
</html>
css：
@CHARSET "UTF-8";
#box {
width: 400px;
height: 300px;
position: absolute;
border: 1px solid #AAAAAA;
top: 25px;
left: 80px;
} #title {
width: 100%;
height: 30px;
line-height: 30px;
background-color: #F1F1F1;
cursor: move;
}
js:
var ox = 0; // 鼠标按下时拖放对象X坐标值
var oy = 0; // 鼠标按下时拖放对象Y坐标值
var mx = 0; // 鼠标按下时鼠标指针X坐标值
var my = 0; // 鼠标按下时鼠标指针Y坐标值
var object = null; // 事件所发生的目标对象
/**
* 定义事件对象标准化函数
*/
function e(event) {
if(!event) { // 兼容IE浏览器
event = window.event;
event.target = event.srcElement;
event.layerX = event.offsetX;
event.layerY = event.offsetY;
}
event.mx = event.pageX || event.clientX + document.body.scrollLeft; // 计算鼠标指针X轴距离
event.my = event.pageY || event.clientY + document.body.scrollTop; // 计算鼠标指针Y轴距离
return event; // 返回标准化的事件对象
}
/**
* 鼠标事件处理
* 按下鼠标，则开始事件的处理
*/
document.onmousedown = function(event) {
event = e(event);
object = event.target;
if(object.id == "title") {
ox = parseInt(object.parentNode.offsetLeft);
oy = parseInt(object.parentNode.offsetTop);
mx = event.mx;
my = event.my;
document.onmousemove = move;
document.onmouseup = stop;
}
}
/**
* 鼠标移动处理函数
*/
function move(event) {
event = e(event);
object.parentNode.style.left = ox + event.mx - mx + "px";
object.parentNode.style.top = oy + event.my - my + "px";
}
/**
* 松开鼠标处理函数
*/
function stop(event) {
event = e(event);
ox = parseInt(object.parentNode.offsetLeft);
oy = parseInt(object.parentNode.offsetTop);
mx = event.mx;
my = event.my;
object = document.onmousemove = document.onmouseup = null; // 释放所有操作对象
}
上述代码在IE和火狐下均测试通过。源代码下载：
转自：http://www.sunchis.com/html/js/jsbasic/2012/0418/399.html
个人感觉这个写的非常好。
一个更好的例子：http://www.yzzer.com/js/141
另参看：http://www.cnblogs.com/youxin/p/3380796.html 拖动div。
鼠标拖放div 实现的更多相关文章
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
- js用斜率判断鼠标进入div的四个方向
网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...
- 发掘ListBox的潜力（二）：鼠标拖放插入点提示
鼠标拖放插入点提示 鼠标拖放是Windows常见的操作,比如拷贝文件就可用拖放方式进行.在我们编写的应用程序中,有时为了方便用户操作需要支持鼠标拖放.对于大部分的VCL控件只要鼠标将DragMode设 ...
- CSS鼠标悬浮DIV后显示DIV外的按钮
昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮. 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题 ...
- JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向
本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- PyQt(Python+Qt)学习随笔：Qt Designer中部件的是否接受鼠标拖放事件的acceptDrops属性及含义
acceptDrops属性表示当前部件是否接受鼠标拖放事件,鼠标拖放应该是与鼠标拖拽结合在一起的,在Qt Designer中可以通过属性acceptDrops设置部件是否接受鼠标拖放事件.如果部件接受 ...
- 当鼠标移入div上时，div的背景色在4s之内渐变为灰色，同时在5s之内顺时针旋转45度，且尺寸缩小一半；当鼠标移走时，再渐变恢复初始样式
<style> #d1{ width:200px; height:200px; border:1px solid #000; transition:background 4s linear ...
- 实现鼠标悬停,div勾画div边框的动画
鼠标悬浮,边框div边框的动画样式,效果图如下: 首先定义div及其样式: <style> .show { width:300px; height:200px; border:1px so ...
随机推荐
- [汇编语言]-第七章 用[bx+idata]的方式进行数组的处理
1- 转化为大写 方法一: assume cs:code,ds:data data segment db 'BaSiC' db 'MinIX' data ends code segment start ...
- SQL Server 存储过程自启动
前期准备: use master; create table LoginLog(LoginName nvarchar(32),LoginTime datetime); create procedure ...
- FPGA的LE数与门数的关系（转）
一般而言FPGA等效门数的计算方法有两种 一是把FPGA基本单元(如LUT+FF,ESB/BRAM)和实现相同功能的标准门阵列比较,门阵列中包含的门数即为该FPGA基本单元的等效门数,然后乘以基本单元 ...
- 第3.3.4节 创建高级图形之RenderScript（二）
Android视图框架对于创建复杂布局非常方便.然而,这种便利是以性能为代价的.当性能至关重要的时候,Android提供了几种更强大的图形处理能力,当然难度也是随之上升了.在本节中,我将介绍: ...
- （二）boost库之字符串格式化
(二)boost库之字符串格式化 程序中经常需要用到字符串格式化,就个人而言还是比较倾向于C格式的输出,如果只是打印日志,printf就够了,如果到生成字符串,获取你可以选择sprintf,但这些都是 ...
- pyspark 写 logistic regression
import random as rd import math class LogisticRegressionPySpark: def __init__(self,MaxItr=100,eps=0. ...
- IOS开发(objective-c)~开篇有理
自从6月份买了iphone5之后,心里都是觉得不学点IOS开发,始终觉得有点浪费,而且咱还学习C,C++,java,C#,有了这些基础,再不学这个Objective-c确实有点可惜了,所以,说干就干, ...
- oracle子查询
子查询:在一个查询的内部包含另外一个查询. 普通子查询 -- 查询出比7654工资还高的所有雇员的信息 select * from emp e where e.sal > (select sal ...
- Sublime 学习记录（五） Sublime 其他插件(个人喜好)
(一) JSFormat 安装 :命令面板 pci 回车 JSFormat 回车 功能 : javascript的代码格式化插件 简介 : 很多网站的JS代码都进行了压缩,一行式的甚至混淆压缩,这让 ...
- UVA 1613 K-Graph Oddity
题意; 在一个n个点的无向连通图中,n是奇数,k是使得所有点的度数不超过k的最小奇数,询问一种染色方案,使得相邻点的颜色不同. 分析: k=所有点中最大的入度.如果最大入度是偶数,则k+1.每个点可选 ...