原生js实现拖拽移动与缩放效果
本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码,供大家参考,具体内容如下
效果图如下-实现了简单的拖拽和缩放功能
第一步—简单的拖拽功能
//创建一个MoveClass构造函数 functionMoveClass(id,options={}){ //绑定ele属性 this.ele=document.querySelector(id); this.move(); }
//给MoveClass原型上绑定move方法 MoveClass.prototype.move=function(){ //ele的鼠标按下事件调用mousedown this.ele.onmousedown=e=>{ //获取事件对象 vare=e||window.event; //鼠标按下时,鼠标相对于元素的x坐标 varx=e.offsetX; //鼠标按下时,鼠标相对于元素的y坐标 vary=e.offsetY; //鼠标按下移动时调用mousemove document.onmousemove=e=>{ //元素ele移动的距离l varl=e.clientX-x; //元素ele移动的距离l vart=e.clientY-y; this.ele.style.left=l+"px"; this.ele.style.top=t+"px"; } //当鼠标弹起时,清空onmousemove与onmouseup document.onmouseup=()=>{ document.onmousemove=null; document.onmouseup=null; } } } //new一个MoveClass对象 varmoveClass=newMoveClass("#box");
效果如下,简单的拖拽
第二步—简单的缩放功能
1.设置方位
//ele的左,左上,左下,右,右上,右下,上,下 MoveClass.prototype.editoptions={ left_top:true, left:true, right:true, top:true, bottom:true, right_top:true, left_bottom:true, right_bottom:true, }
2.给原型绑定缩放的方法
//给原型绑定缩放的方法 MoveClass.prototype.editEle=function(){ //console.log(this.ele.clientWidth,this.ele.clientHeight); //console.log(this.ele.offsetLeft,this.ele.offsetTop); varthat=this; //创建一个div vardiv=document.createElement("div"); //遍历this.editoptions for(letattrinthis.editoptions){ if(this.editoptions[attr]){ //循环创建左,左上,左下,右,右上,右下,上,下方位的小点 vardian=document.createElement("div"); dian.className="dian"+attr; //设置类型为对应的attr dian.dataset.type=attr; //当按下对应方位的小点时 dian.onmousedown=e=>{ vare=e||window.event; //先获取鼠标距离屏幕的left与top值 varclientXY={ x:e.clientX, y:e.clientY } //获取鼠标按下时ele的宽高 vareleWH={ width:this.ele.clientWidth, height:this.ele.clientHeight, } //阻止事件冒泡(针对父元素的move) e.stopPropagation(); //通过e.target获取精准事件源对应的type值 vartype=e.target.dataset.type; //鼠标按下对应方位小点移动时,调用mousemove document.onmousemove=function(e){ //查找type中是否包含”right“ if(type.indexOf('right')>-1){ //console.log("right"); //如果拖拽后的宽度小于最小宽度,就return出去 if(that.options.minWidth>eleWH.width+e.clientX-clientXY.x){ return; } //ele拖拽后的宽度为:初始width+拖拽后鼠标距离屏幕的距离-第一次按下时鼠标距离屏幕的距离 that.ele.style.width=(eleWH.width+e.clientX-clientXY.x)+"px"; } //与”right“相同原理 if(type.indexOf("bottom")>-1){ //console.log("bottom"); if(that.options.minHeight>eleWH.height+e.clientY-clientXY.y){ return; } that.ele.style.height=(eleWH.height+e.clientY-clientXY.y)+"px" } if(type.indexOf("top")>-1){ //console.log("top"); if(that.options.minHeight>eleWH.height-e.clientY+clientXY.y){ return; } //ele拖拽后的高度为:初始height-拖拽后鼠标距离屏幕的距离+第一次按下时鼠标距离屏幕的距离 that.ele.style.height=(eleWH.height-e.clientY+clientXY.y)+"px"; //重新设置ele的top值为此时鼠标距离屏幕的y值 that.ele.style.top=e.clientY+"px"; } //与”top“相同原理 if(type.indexOf("left")>-1){ //console.log("left"); if(that.options.minWidth>eleWH.width-e.clientX+clientXY.x){ return; } that.ele.style.width=(eleWH.width-e.clientX+clientXY.x)+"px"; //重新设置ele的left值为此时鼠标距离屏幕的x值 that.ele.style.left=e.clientX+"px"; } } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } } //将类名为”dian“的div添加到div中 div.appendChild(dian); } //为div设置类名 div.className="kuang" //将类名为”kuang“的div添加到ele中 this.ele.appendChild(div); }
效果图如下
最终效果,盒子可以拖动,可以缩放。
盒子上的8个小点采用定位放上去的,事先写好了样式
所有的代码能直接粘贴使用。缩放的原理其实就是鼠标按下去时,获取当前的鼠标位置和盒子的宽高,鼠标按下并移动后获取此时的鼠标位置。
拖拽后的宽高=初始宽高+(拖拽后鼠标距离屏幕的位置-第一次按下时鼠标距离屏幕的位置)。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。