document.onmousemove = function{//鼠标移动 this.innerHTML = 'Mouse Position('+event.pageX+','+event.pageY+')'; if{//当前正在移动 if{//temp临时拖动目标不存在 temp = document.createElement; temp.id = 'drag'; temp.className = 'temp'; document.body.appendChild;//将temp临时拖动目标添加到页面中 } //改变位置 temp.style.left = (startX + event.pageX - mX) + 'px'; temp.style.top = (startY + event.pageY - mY) + 'px'; //检测是否在目标范围内 if(checkIntersect{ //在范围内 $.style.border = '2px #F00 dashed'; $.style.webkitAnimationName = 'light';//闪烁动画 $.style.webkitAnimationDuration = '1s'; $.style.webkitAnimationDelay = '0.5s'; $.style.webkitAnimationIterationCount = '100'; }else{ //不在范围内 $.style.border = '2px #09F dashed'; $.style.webkitAnimationName = ''; } } };
document.onmouseup = function(){//鼠标释放 isDrag = false; if(checkIntersect{ elem.style.left=$.offsetLeft+'px'; elem.style.top=$.offsetTop+'px'; }else{ elem.style.left=temp.offsetLeft+'px'; elem.style.top=temp.offsetTop+'px'; } document.body.removeChild;//移出临时拖动目标 temp = null; $.style.border = '2px #09F dashed'; $.style.webkitAnimationName = '';//取消闪烁 };

说明:这里的mousemove事件并不是添加到被拖动对象上面,如果添加到elem上面,那么鼠标如果移动太快一旦鼠标离开了elem对象,那么就会出现问题。

先看看效果图(Chrome、FireFox、Opera、Safari、IE9测试通过):

鼠标按下时:获取被拖动元素的位置和鼠标按下的位置,设置拖动的标志值为true。

鼠标释放时:检测碰撞结果,根据情况设置被拖动对象的位置,如果以碰撞,则根据目标div的位置设置被拖动对象的位置,否则根据temp的位置来设置被拖动对象的位置;

完整代码:点击下载 下载一

另外,检测碰撞的函数;

效果图(虚线框:目标对象 蓝色填充透明框:临时拖动对象
红色填充框:被拖动对象)

学了几天的JavaScript,自己动手做了一个简单的鼠标拖动的实例,拖动过程中科自动检测与目标容器的距离,在一定的距离范围内可以自动将被拖动的元素加入到目标容器中,希望对开始学习javascript的童鞋有用……

网页制作web前端之家文章简介:JavaScript鼠标拖动+自动吸附实例。

与之间,并且用

主要思路数据解读 ,:首先给要拖动的div添加一个鼠标按下事件、给document对象添加鼠标移动事件和鼠标弹起事件。鼠标开始移动的时候创建一个临时的拖动对象,移动过程中改变临时拖动目标的位置,鼠标释放时将被拖动的div的位置设置为临时拖动目标temp的位置,然后移出临时拖动目标。移动过程中,同时还检测了拖动的对象和目标div的位置关系,如果碰撞,则自动吸附,需要说明的是:这里简单起见,并没有真正的把被拖动对象加入到目标对象中,只是设置了被拖动对象的位置。

鼠标移动时:如果isDrag为true,并且temp对象不存在,则创建temp对象,并根据鼠标的位置计算并设置temp的位置。

=======================================================

function checkIntersect{//检测碰撞,distance为吸附的范围 var left1 =
obj1.offsetLeft; var top1 = obj1.offsetTop; var left2 = obj2.offsetLeft;
var top2 = obj2.offsetTop; var width1 = obj1.offsetWidth; var height1 =
obj1.offsetHeight; var width2 = obj2.offsetWidth; var height2 =
obj2.offsetHeight; return (
((left1-left2>=0&&left1-left2=0&&left2-left1=0&&top1-top2=0&&top2-top1总结:这里面主要用到了javascript鼠标事件,简单的DOM节点操作,还有css3的一些新的东西,比如动画、圆角、阴影等知识。

标记进行声明)或者链接式(用类似这样的方式导入外部样式表)、导入式,我们就无法从上面的方式中获取样式的相关值,但是我们可以用其他的方法:IE下元素有currentStyle对象,其他浏览器采用document.defaultView.getComputedStyle()方法,这样可以获取样式属性的值。代码如下:

function getCSSValue{//获取元素CSS值 if{//IE return obj.currentStyle[key]; }else{//!IE return document.defaultView.getComputedStyle[key]; } }
elem.onmousedown = function{//鼠标按下 isDrag = true; startX = parseInt(this.style.left||getCSSValue; startY = parseInt(this.style.top||getCSSValue; mX = event.pageX; mY = event.pageY; };

用到的其他函数:在设计过程中,我们需要或许某个元素样式的一些值,如果我们采用行内式(即将样式写在元素标签里面的style属性里面),我们可以采用“obj.style.left”类似这样的语法来或许,但是如果我们的样式采用了内嵌式(将CSS写在

相关文章

网站地图xml地图