手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >可以拖动的div 实现代码第1/2页
可以拖动的div 实现代码第1/2页
摘要:要实现div的任意拖动,我们不妨分析一下整个过程。当鼠标点击div时,触发一个事件,让div的位置属性(left,top)随着鼠标位置变化而...

要实现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;

}

当前1/2页12下一页阅读全文

【可以拖动的div 实现代码第1/2页】相关文章:

javascript实现youku的视频代码自适应宽度

鼠标图片振动代码

jquery插件validation实现验证身份证号等

js实现异步循环实现代码

怎么用javascript进行拖拽第1/2页

超酷右下浮出广告窗口代码

DIV任意拖动的问题

实现DIV圆角的JavaScript代码

剖析Node.js异步编程中的回调与代码设计模式

一段实时更新的时间代码

精品推荐
分类导航