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和火狐下均测试通过。源代码下载：

JavaScript鼠标移动对象示例

转自：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 实现的更多相关文章

  1. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  2. js用斜率判断鼠标进入div的四个方向

    网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...

  3. 发掘ListBox的潜力（二）：鼠标拖放插入点提示

    鼠标拖放插入点提示 鼠标拖放是Windows常见的操作,比如拷贝文件就可用拖放方式进行.在我们编写的应用程序中,有时为了方便用户操作需要支持鼠标拖放.对于大部分的VCL控件只要鼠标将DragMode设 ...

  4. CSS鼠标悬浮DIV后显示DIV外的按钮

    昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮. 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题 ...

  5. JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向

    本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...

  6. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  7. PyQt(Python+Qt)学习随笔：Qt Designer中部件的是否接受鼠标拖放事件的acceptDrops属性及含义

    acceptDrops属性表示当前部件是否接受鼠标拖放事件,鼠标拖放应该是与鼠标拖拽结合在一起的,在Qt Designer中可以通过属性acceptDrops设置部件是否接受鼠标拖放事件.如果部件接受 ...

  8. 当鼠标移入div上时，div的背景色在4s之内渐变为灰色，同时在5s之内顺时针旋转45度，且尺寸缩小一半；当鼠标移走时，再渐变恢复初始样式

    <style> #d1{ width:200px; height:200px; border:1px solid #000; transition:background 4s linear ...

  9. 实现鼠标悬停,div勾画div边框的动画

    鼠标悬浮,边框div边框的动画样式,效果图如下: 首先定义div及其样式: <style> .show { width:300px; height:200px; border:1px so ...

随机推荐

  1. Drawable复习—第六章

    一.Drawable的分类及使用 复习知识:①.Drawable有几种类别. ②.在哪里利用xml创建Drawable  ③.类中各个类别如何使用  ④.Drawable的插值器和设置时常.是否保持动 ...

  2. 提升Boolean和out相结合的用户体验

    在我们编写代码的过程中经常有这样的需求,比如添加一条数据,我们想要的结果是如果添加成功了就返回true,如果添加失败了就返回false,在返回false的同时携带错误信息,我们通常的做法是定义这样的方 ...

  3. Nginx安装配置PHP（FastCGI）环境的教程

    这篇是Nginx安装配置PHP(FastCGI)环境的教程.Nginx不支持对外部程序的直接调用或者解析,所有的外部程序(包括PHP)必须通过FastCGI接口来调用. 一.什么是 FastCGI F ...

  4. Linux命令（持续更新ing）

    *.命令语法:  a.在进行参数设定时,通常为“-”号,若为完整参数名称,则输入“--”符号;  b.指令太长的时候,可以使用“\”符号使指令连续到下一行;  c.各种符号的意义:    ''     ...

  5. 将一段含有0的字符数组赋给string

    string有个成员函数,assign() 可以这样: string str; str.assign(temp, sizeof(temp));

  6. Table XXX is marked as crashed and should be repaired问题

    数据表出错了,查询数据获取不到了. 尝试一 重启mysql service mysqld restart 没用,重启并没有把表修复掉 尝试二 check table vicidial_list;rep ...

  7. axis2之webservice

    Axis2之webservice超详细教程 Axis2是一套崭新的WebService引擎,该版本是对Axis1.x重新设计的产物.Axis2不仅支持SOAP1.1和SOAP1.2,还集成了非常流行的 ...

  8. 【POJ 1679 The Unique MST】最小生成树

    无向连通图(无重边),判断最小生成树是否唯一,若唯一求边权和. 分析生成树的生成过程,只有一个圈内出现权值相同的边才会出现权值和相等但“异构”的生成树.(并不一定是最小生成树) 分析贪心策略求最小生成 ...

  9. ios中block中的探究

    http://blog.csdn.net/jasonblog/article/details/7756763

  10. C语言 EOF是什么？

    Linux中,在新的一行的开头,按下Ctrl-D,就代表EOF(如果在一行的中间按下Ctrl-D,则表示输出"标准输入"的缓存区,所以这时必须按两次Ctrl-D):Windows中 ...