可以拖动的div是一个比较难以做到的效果，特别是在浏览器对于js代码的运行效率还不是足够高的情况下，不过听说firefox对于js的支持正在增加，大概是料到了js在网页浏览的桌面化趋势中所占的重要地位吧。 要实现div的任意拖动，我们不妨分析一下整个过程。
当鼠标点击div时，触发一个事件，让div的位置属性（left，top）随着鼠标位置变化而变化，当鼠标释放后，div的位置属性就用了鼠标释放时的位置。
鼠标点击时触发事件是很容易做到的，只要在div的标签里加上onmouseclick就可以了，现在我们要解决的问题是如何让div的位置随着鼠标的位置变化而变化。
虽然这可能是一个很简单的推理过程，不过还是罗嗦点说清楚吧。div的left和top是div左上角的坐标，当我们把鼠标移到div中点击的时候，无疑鼠标的坐标和div的坐标是不一致的，这时候如果我们简单的让div的坐标等于鼠标的坐标，那么看起来的效果就不是那么完美了，所以我们先要得到鼠标的坐标和div坐标的差，然后在鼠标移动到的时候，在鼠标坐标上减去这个差来得到div的坐标（如果不太明白，那就先补习一下网页的基础知识）。
接下来的事情就简单了，当鼠标移动的时候，我们不断的计算得到div的坐标，并改变，在鼠标释放的时候，这个事件就被移除。
整个js函数如下：
function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener(”mousemove”,moveHandler,true);
document.addEventListener(”mouseup”,upHandler,true);
//document.addEventListener(”mouseout”,upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent(”onmousemove”,moveHandler);
document.attachEvent(”onmouseup”,upHandler);
//document.attachEvent(”onmouseout”,upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
　　if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event
　　//全局属性，否则就用DOM二级标准的Event对象。
elementToDrag.style.left=(e.clientX-deltaX)+”px”;
elementToDrag.style.top=(e.clientY-deltaY)+”px”;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener(”mouseup”,upHandler,true);
document.removeEventListener(”mousemove”,moveHandler,true);}
else
{
document.detachEvent(”onmouseup”,upHandler);
document.detachEvent(”onmousemove”,moveHandler);}
}
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
可以拖动的div是一个比较难以做到的效果，特别是在浏览器对于js代码的运行效率还不是足够高的情况下，不过听说firefox对于js的支持正在增加，大概是料到了js在网页浏览的桌面化趋势中所占的重要地位吧。
关于这个实现div拖动的js函数，实际上也是某位前辈公布于网上，这儿只是摘抄注解一下。
function beginDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
//这儿的deltaX/Y实际上就是得出鼠标和div的坐标差。
if(document.addEventListener)
//之所以在这儿加这样一个判断，是因为IE6和firefox对于javascript的事件处理有不同的方法（IE7之后的版本开始符合W3C的标准）。
//document.addEventlistener如果是true的话，那就是firefox等支持W3C DOM标准的浏览器，IE6中注册事件用attachEvent，而firefox等浏览器则是用addEventListener，语法如下所示。addEventListener函数的true参数表示可以捕捉事件。
{
document.addEventListener(”mousemove”,moveHandler,true);
document.addEventListener(”mouseup”,upHandler,true);
//document.addEventListener(”mouseout”,upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent(”onmousemove”,moveHandler);
document.attachEvent(”onmouseup”,upHandler);
//document.attachEvent(”onmouseout”,upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
//这儿的判断依然是考虑了不同的浏览器，stopPropagation是W3C DOM标准中使用的一个方法，用来取消事件的传播。我们使用了document.addEventListener这个方法，浏览器会从document对象沿着DOM节点向下传播到目标节点，注册的事件处理程序就会运行，然后事件会回传到父节点，如果父节点也有相应的事件处理程序，那么事件也会处理，为了避免这种情况，我们可以用stopPropagation来阻止事件的传播，这个方法的作用就是让其他元素对这个事件不可见。在IE6下，并没有元素捕捉事件的过程，不过有这个术语叫做起泡的过程，IE6中所用的方法就是cancelBubble，用来取消起泡，表示这个事件已被处理，其他元素不用再看见了。
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//这儿的preventDefault用来通知浏览器不要执行与事件关联的默认动作，returnValue用来取消发生事件的源元素的默认动作，大家应该能看出这是在不同浏览器下发挥相同的作用。
//以下就是拖动div中所用的关键函数了。
function moveHandler(e)
{
　　 if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event
　　 //全局属性，否则就用DOM二级标准的Event对象。
//在IE中，event是window的一个属性，也就是一个全局变量，但是在W3C DOM中，event是发生事件的文档对象的属性。在这个程序中，event是什么并不重要，关键是我们要取得鼠标的坐标值，在IE中，e这个参数传进来的时候，IE认不出来，所以我们就给e赋值为window.event。
elementToDrag.style.left=(e.clientX-deltaX)+”px”;
elementToDrag.style.top=(e.clientY-deltaY)+”px”;
//这儿就是改变现在正在作用的div的left和top属性。
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener(”mouseup”,upHandler,true);
document.removeEventListener(”mousemove”,moveHandler,true);
}
else
{
document.detachEvent(”onmouseup”,upHandler);
document.detachEvent(”onmousemove”,moveHandler);
}
//这个函数是用来移除侦听器，比较简单，就不详细说了。
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}

评论 (0) All

登陆 还没注册？