原生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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。