javascript 跨平台拖拽实现

来源：互联网发布：淘宝客服怎么实名认证编辑：程序博客网时间：2024/06/03 16:51

<!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>
<title></title>
<script type="text/javascript">
//<![CDATA[

/*

--跨平台拖拽
--只需要将要拖拽的元素使用makeDragable注册即可
--author: sodarfish
--date : Friday, January 09, 2009
*/

function moveElement(nsEvent){
var theEvent = nsEvent ? nsEvent : window.event;
if(dragObject && dragObject.style){
dragObject.style.left = (originLeft + theEvent.clientX - originX) + 'px';
return false; //重要,但要注意,return false 只能禁止默认行为.比如ie里面鼠标移动到边缘之外会发生滚动
}

}
//根据事件传递机制,子元素传递到高层元素,如果高层指定了事件响应,则会被调用
//在FF中,如果指定了document的响应而未指定元素的响应,则首先执行document的，元素的不予执行
////////////////全局变量////////////
var originX;
var originLeft;
var dragObject;
////////////////全局变量////////////
function mouseDown(nsEvent)
{
var theEvent = nsEvent ? nsEvent : window.event;
var target = theEvent.target ? theEvent.target : theEvent.srcElement;
originX = lib_parseInt(theEvent.clientX);
originLeft = lib_parseInt(target.style.left);
dragObject = target;
//alert(target);
}

function mouseUp(event){
dragObject = null;
var theEvent = event ? event : window.event;
//lib_stopEvent(theEvent);//stop bubbling
return false;
}

function makeDragable(item)
{
if(!item)
return;
item.onmousedown = function(event){
var theEvent = event ? event : window.event;
originX = lib_parseInt(theEvent.clientX);
originLeft = lib_parseInt(this.style.left);
dragObject = this;
//lib_stopEvent(theEvent); 由于事件传播,移动子元素,父元素如果允许拖拽也将移动,使用stopEvent可以
//停止事件传播. 移动父元素,子元素会跟着移动,这是理所当然的
}
}

//查看对象的所有属性
function lib_getPropertiesStr(obj){
if(obj == null)
return "";
var str = "";
for( var i in obj)
str += i + "<br />";
return str;
}

//获取body对象
function lib_getHtmlBody(){
return document.documentElement ? document.documentElement : document.body;
}
//获取相当于scorllLeft的值
function lib_getScrollLeft(){
return (!window.pageYOffset) ? lib_getHtmlBody().scrollLeft : window.pageXOffset;
}
function lib_getScrollTop(){
return (!window.innerHeight) ? lib_getHtmlBody().scrollTop : window.pageYOffset;
}
//获取鼠标事件真正的x坐标(相对于页面的左边缘)
function lib_getPageX(evnt){
return (!evnt.pageX) ? (lib_getScrollLeft() + evnt.clientX) : evnt.pageX;
}
//所有形式上不是数字的参数都返回0,否则返回数字
function lib_parseInt(sNum){
var iNum = parseInt(sNum);
return isNaN(iNum) ? 0 : parseInt(sNum);
}

function lib_stopEvent(evnt)
{
if(evnt.stopPropagation)
evnt.stopPropagation();
else{
evnt.cancelBubble = true;
}
}

window.onload = function(){

makeDragable(document.getElementById("div1"));
makeDragable(document.getElementById("div2"));
makeDragable(document.getElementById("info"));
document.onmousemove = moveElement;
document.onmouseup = mouseUp;

}

//]]>
</script>
</head>
<body>
<div style="border:1px solid #000;position:relative;left:100px;height:500px;">
<div id="div1" style="position:absolute;width:100px;height:100px;background-color:#ff0" >
<div id="div2" style="width:20px;height:20px;border:1px solid blue;position:absolute;background-color:#000;cursor:hand"></div>
</div>
</div>

<div id="info" style="position:absolute;top:200px;width:2000px;background-color:#ccc;"></div>
</body>
</html>