可拖动DOM模型1

默认分类 2011-04-05 20:25:48

转载:http://kenshin54.iteye.com/blog/365660

ol start="100" class="dp-xml" style="font-size:1em;line-height:1.4em;margin-top:0px;margin-right:0px;margin-bottom:1px;margin-left:0px;padding-top:2px;padding-right:0px;padding-bottom:2px;padding-left:0px;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(209, 215, 220);border-right-color:rgb(209, 215, 220);border-bottom-color:rgb(209, 215, 220);border-left-color:rgb(209, 215, 220);list-style-type:decimal;list-style-position:outside;list-style-image:initial;background-color:rgb(255, 255, 255);color:rgb(43, 145, 175);">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<!--

/说明：自动判断浏览器是否支持，运行此程序。

该函数由mousedown事件处理程序中调用它时，它允许用户拖动文档元素。

beginDrag()的第一个参数必须是一个文档元素，该元素用CSS position性质绝对定位。在style性质中，CSS性质的left和top

*必须被明确地设置为像素值，第二个参数是与触发mousedown事件相关的事件对象。

function beginDrag(elementToDrag, event) {

var x = parseInt(elementToDrag.style.left);

var y = parseInt(elementToDrag.style.top);

//计算一个点和鼠标点击(event.clientX,event.clientY)的位置之间的距离

var deltaX = event.clientX - x;

var deltaY = event.clientY - y;

if (document.addEventListener) //是否支持2级ＤＯＭ事件模型

{

//document.write("该浏览器支持DOM L2事件模型");

document.addEventListener("mousemove", moveHandler, true);

document.addEventListener("mouseup", upHandler, true);

}

else if (document.attachEvent) //是否支持IE 5+事件模型

{

//document.write("该浏览器是IE5+, 不支持DOM L2事件模型");

document.attachEvent("onmousemove",moveHandler);

document.attachEvent("onmouseup",upHandler);

}

else //ＩＥ　４事件模型

{ //在IE4我们不能使用attachEvent()方法，所以存储了以前赋予的处理程序后，

　//直接赋予新的事件处理程序．这样还可以恢复旧的处理程序．

　//注意：这同样依赖于事件气泡．

//document.write("该浏览器是IE4");

var oldmovehandler=document.onmousemove;

var olduphandler=document.onmouseup;

document.onmousemove=moveHandler;

document.onmouseup=upHandler;

}

//我们已经处理了该事件，不要让别的元素看到它。

//Event接口还定义了两个方法，即stopPropagation()和preventDefault()

if (event.stopPropagation)

{

event.stopPropagation();//stopPropagation()可以阻止事件从当前正在处理它的节点传播。

}else{

event.cancelBubble=true;

}

if (event.preventDefault)

{

event.preventDefault();//preventDefault()阻止浏览器执行与事件相关的默认动作

}else{

event.returnValue=false;

}

//在2级DOM API中，可以调用preventDefault()方法，与在0级事件模型中返回false一样。（如自定义右键弹出窗口）

*这是在元素被拖动时捕捉mousemove事件的处理程序。

function moveHandler(e) {

//把元素移到当前的鼠标位置，根据初始鼠标点击的偏移量进行调整。

if (!e)

{

e=window.event;

}

elementToDrag.style.left = (e.clientX - deltaX) + "px";

elementToDrag.style.top = (e.clientY - deltaY) + "px";

// And don't let anyone else see this event.

//不要让别的元素看到该事件。

if (e.stopPropagation)

{

e.stopPropagation(); //ＤＯＭ　　L2

}else{

e.cancelBubble=true; //IE

}

*该处理程序将捕捉拖移结束时发生的mouseup事件。

function upHandler(e) {

if (!e)

{

e=window.event;

}

//注销捕捉事件处理程序。

if (document.removeEventListener)

{

document.removeEventListener("mouseup", upHandler, true);

document.removeEventListener("mousemove", moveHandler, true);

}

else if (document.detachEvent)

{

document.detachEvent("onmouseup",upHandler);

document.detachEvent("onmousemove",moveHandler);

}else

{

document.onmouseup=olduphandler;

document.onmousemove=oldmovehandler;

}

// 不要让该事件进一步传播。

if (e.stopPropagation)

{

e.stopPropagation();

}else

{

e.cancelBubble=true;

}

//-->

</SCRIPT>

</HEAD>

<BODY>

DRAG ME!!!HELLO!

</DIV>

<spa

>> 留言评论