您的位置：首页 > Web前端 > JavaScript

javascript 跨平台拖拽实现

2012-02-21 18:05 239 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 跨平台 javascript function div xhtml border

相关文章推荐

新的分享

章节导航