烟台网站制作培训,上海网站建设公司 翱思,成都进入搜索热度前五,福州网站制作哪里好JavaScript鼠标拖动自动吸附实例 学了几天的JavaScript#xff0c;自己动手做了一个简单的鼠标拖动的实例#xff0c;拖动过程中科自动检测与目标容器的距离#xff0c;在一定的距离范围内可以自动将被拖动的元素加入到目标容器中#xff0c;希望对开始学习javascript的童鞋…JavaScript鼠标拖动自动吸附实例 学了几天的JavaScript自己动手做了一个简单的鼠标拖动的实例拖动过程中科自动检测与目标容器的距离在一定的距离范围内可以自动将被拖动的元素加入到目标容器中希望对开始学习javascript的童鞋有用…… 先看看效果图Chrome、FireFox、Opera、Safari测试通过 效果图虚线框目标对象 蓝色填充透明框临时拖动对象 红色填充框被拖动对象 主要思路首先给要拖动的div添加一个鼠标按下(mousedown)事件、给document对象添加鼠标移动(mousemove)事件和鼠标弹起(mouseup)事件。鼠标开始移动的时候创建一个临时的拖动对象temp移动过程中改变临时拖动目标的位置鼠标释放时将被拖动的divelem的位置设置为临时拖动目标temp的位置然后移出临时拖动目标。移动过程中同时还检测了拖动的对象和目标div的位置关系如果碰撞可以设置吸附的范围则自动吸附将被拖动的对象加入到目标对象中需要说明的是这里简单起见并没有真正的把被拖动对象加入到目标对象中只是设置了被拖动对象的位置。 鼠标按下时获取被拖动元素的位置和鼠标按下的位置设置拖动的标志isDrag值为true。 elem.onmousedown function(event){//鼠标按下isDrag true;startX parseInt(this.style.left||getCSSValue(this,left));startY parseInt(this.style.top||getCSSValue(this,top));mX event.pageX;mY event.pageY;}; 鼠标移动时如果isDrag为true并且temp对象不存在则创建temp对象并根据鼠标的位置计算并设置temp的位置。 document.onmousemove function(event){//鼠标移动this.innerHTML Mouse Position(event.pageX,event.pageY);if(isDrag){//当前正在移动if(temp undefined){//temp临时拖动目标不存在temp document.createElement(div);temp.id drag;temp.className temp;document.body.appendChild(temp);//将temp临时拖动目标添加到页面中}//改变位置temp.style.left (startX event.pageX - mX) px;temp.style.top (startY event.pageY - mY) px;//检测是否在目标范围内if(checkIntersect(temp,$(target),20)){//在范围内$(target).style.border 2px #F00 dashed;$(target).style.webkitAnimationName light;//闪烁动画$(target).style.webkitAnimationDuration 1s;$(target).style.webkitAnimationDelay 0.5s;$(target).style.webkitAnimationIterationCount 100;}else{//不在范围内$(target).style.border 2px #09F dashed;$(target).style.webkitAnimationName ;}}}; 说明这里的mousemove事件并不是添加到被拖动对象elem上面如果添加到elem上面那么鼠标如果移动太快一旦鼠标离开了elem对象那么就会出现问题。 鼠标释放时检测碰撞结果根据情况设置被拖动对象elem的位置如果以碰撞则根据目标div的位置设置被拖动对象elem的位置否则根据temp的位置来设置被拖动对象elem的位置 document.onmouseup function(){//鼠标释放isDrag false;if(checkIntersect(temp,$(target),20)){elem.style.left$(target).offsetLeftpx;elem.style.top$(target).offsetToppx;}else{elem.style.lefttemp.offsetLeftpx;elem.style.toptemp.offsetToppx;}document.body.removeChild(temp);//移出临时拖动目标temp null;$(target).style.border 2px #09F dashed;$(target).style.webkitAnimationName ;//取消闪烁}; 用到的其他函数在设计过程中我们需要或许某个元素样式的一些值如果我们采用行内式即将样式写在元素标签里面的style属性里面我们可以采用“obj.style.left”类似这样的语法来或许但是如果我们的样式采用了内嵌式将CSS写在head与/head之间并且用style和/style标记进行声明或者链接式用类似这样的link hrefcss.css typetext/css relstylesheet方式导入外部样式表、导入式采用import语句我们就无法从上面的方式中获取样式的相关值但是我们可以用其他的方法IE下元素有currentStyle对象其他浏览器采用document.defaultView.getComputedStyle方法这样可以获取样式属性的值。代码如下 function getCSSValue(obj,key){//获取元素CSS值if(obj.currentStyle){//IEreturn obj.currentStyle[key]; }else{//!IEreturn document.defaultView.getComputedStyle(obj,null)[key];}} 另外检测碰撞的函数; function checkIntersect(obj1,obj2,distance){//检测碰撞,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-left20left1-left2width2distance)||(left2-left10left2-left1width1distance))((top1-top20top1-top2height2distance)||(top2-top10top2-top1height1distance)));} 总结这里面主要用到了javascript鼠标事件简单的DOM节点操作还有css3的一些新的东西比如动画animation、圆角border-radius、阴影box-shadow等知识。转载于:https://www.cnblogs.com/wu-hou/p/6739498.html
