462937186
commented
5 years ago 封装的拖拽与放大缩小，旋转
首先基础的有两个元素来控制旋转和放大
//html和css先为这样
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
position: relative;
width: 500px;
height: 500px;
background: red;
cursor: pointer;
}
.rotate {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.del {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.deag {
cursor: pointer;
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<div class="box">
拖拽移动
<i class="rotate">旋转</i>
<i class="del">删除</i>
<i class="deag">拖拽放大缩小</i>
</div>
js部分
旋转
var preX,preY;//上一次鼠标点的坐标
var curX,curY;//本次鼠标点的坐标
var preAngle;//上一次鼠标点与圆心(150,150)的X轴形成的角度(弧度单位)
var transferAngle;//当前鼠标点与上一次preAngle之间变化的角度
var a = 0;
$(".rotate").mousedown(function (e) {
e.stopPropagation();
e.preventDefault();
//获取圆心（盒子距离浏览器的距离+自身宽高的一半）
let oldY = $(".box").offset().top+$(".box")[0].offsetHeight/2;
let oldX = $(".box").offset().left+$(".box")[0].offsetWidth/2;
//按钮父元素
let myimg = e.target.parentElement;
//clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
preX = e.clientX;
preY = e.clientY;
//atan2() 方法可返回从 x 轴到点 (x,y) 之间的角度。
//计算当前点击的点与圆心的X轴的夹角(弧度) --> 上半圆为负(0 ~ -180), 下半圆未正[0 ~ 180]
preAngle = Math.atan2(preY - oldY, preX - oldX);
document.onmousemove = function (ev) {
ev.stopPropagation();
ev.preventDefault();
//新的点的位置，即鼠标的(x,y)的位置
curX = event.clientX;
curY = event.clientY;
//移动后的鼠标点与圆心的X轴形成的角度(弧度单位)
var curAngle = Math.atan2(curY - oldY, curX - oldX);
transferAngle = curAngle - preAngle;
a += (transferAngle * 180 / Math.PI);
myimg.style.transform = "rotate(" +a+ "deg)";
//移动后坐标点重新赋值
preX = curX;
preY = curY;
preAngle = curAngle;
ev.target.onmouseup = function (e) {
document.onmousedown = null;
document.onmouseup = null;
document.onmousemove = null;
}
}
})
放大缩小
$(".deag").mousedown(function(e){
let target = e.target;
let mybox = target.parentElement; //盒子
// 阻止冒泡,避免缩放时触发移动事件
e.stopPropagation();
e.preventDefault();
//获取盒子的长宽和点击时候鼠标距离浏览器的距离
var pos = {
'w': mybox.offsetWidth,
'h': mybox.offsetHeight,
'x': e.clientX,
'y': e.clientY
};
document.onmousemove = function(ev) {
ev.stopPropagation();
ev.preventDefault();
//clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
//Math.max返回两个数值的最大值，此处用来设置最小宽度
var w = Math.max(200, ev.clientX - pos.x + pos.w)
// 新的宽/旧的宽 得到比例尺
var tt = w / pos.w;
//高也乘以比例尺达到等比放大缩小
var h = pos.h * tt;
//offsetWidth返回元素的宽度
//offsetTop返回元素的上外缘距离最近采用定位父元素内壁的距离，
//如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离
mybox.style.width = w + 'px';
mybox.style.height = h + 'px';
// 释放事件
ev.target.onmouseup = function(e) {
document.onmousedown = null;
document.onmouseup = null;
document.onmousemove = null;
}
}
})拖拽
$(".box").mousedown(function (e) {
var nowshowimg = e.target;
// 浏览器有一些图片的默认事件,这里要阻止
e.preventDefault();
var nowbox = e.target;
//获取鼠标在盒子内的距离
var disX = e.clientX - nowbox.style.left.slice(0, -2);
var disY = e.clientY - nowbox.style.top.slice(0, -2);
nowshowimg.onmousemove = function (ev) {
// ev.preventDefault();
//获取鼠标移动后整个盒子距离浏览器的距离
var x = ev.clientX - disX;
var y = ev.clientY - disY;
// 图形移动的边界判断
x = x <= 0 ? 0 : x;
x = x >= document.offsetWidth - nowshowimg.offsetWidth ?document.offsetWidth - nowshowimg.offsetWidth : x;
y = y <= 0 ? 0 : y;
y = y >= document.offsetHeight - nowshowimg.offsetHeight ? document.offsetHeight - nowshowimg.offsetHeight : y;
nowbox.style.left = x + 'px';
nowbox.style.top = y + 'px';
}
nowshowimg.onmouseup = function (ev) {
// ev.preventDefault();
nowshowimg.onmousemove = null;
nowshowimg.onmouseup = null;
}
})
代码搬运