鼠标拖放div 实现

转载

mob604756f8c81a 2013-10-21 16:34:00

文章标签 鼠标指针 html javascript 事件对象 css 文章分类 运维

Javascript的mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动1个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。

例如，接下来的一个例子就演示了如何综合应用各种鼠标事件来实现页面元素拖放操作的设计过程。在实现拖放操作的设计过程中，需要理清和解决以下几个问题：

定义拖放元素为绝对定位，以及设计事件的响应过程。这个实现比较容易。
清楚几个坐标概念：按下鼠标时的指针坐标，移动过程中当前鼠标的指针坐标，松开鼠标时的指针坐标，目标被拖动元素的元素坐标，拖动过程中的目标元素坐标。
算法设计：按下鼠标时，获取目标被拖动元素和鼠标指针的坐标位置，在移动过程中实时计算鼠标偏移的距离，并利用该偏移距离加上目标被拖动元素的原始坐标位置，获得目标被拖动元素的实时坐标位置。

鼠标拖放div 实现_javascript

如上图所示，其中变量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;  // 释放所有操作对象 
}