带线拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.calculator {
position: absolute; /*设置绝对定位，脱离文档流，便于拖拽*/
width: 100px;
height: 100px;
cursor: pointer; /*鼠标呈拖拽状*/
background-color: red
}
.slopingside{
position: absolute;
height:0px;
border: 1px solid black;
width: 0px;
-webkit-transform:rotate(0deg);
}
</style>
</head>
<body>
<div class="calculator" id="drag"></div>
<div class="slopingside" id="drag2"></div>
<script>
window.onload = function() {
var left0=0;
var top0=0;
var drag = document.getElementById('drag');
var drag2 = document.getElementById('drag2');
//点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
drag.onmousedown = function(e) {
var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
var diffY = e.clientY - drag.offsetTop;
document.onmousemove = function(e) {
var left=e.clientX-diffX;
var top=e.clientY-diffY;
//控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条
if(left<0){
left=0;
}else if(left >window.innerWidth-drag.offsetWidth){
left = window.innerWidth-drag.offsetWidth;
}
if(top<0){
top=0;
}else if(top >window.innerHeight-drag.offsetHeight){
top = window.innerHeight-drag.offsetHeight;
}
//移动时重新得到物体的距离，解决拖动时出现晃动的现象
drag.style.left = left+ 'px';
drag.style.top = top + 'px';
var L=Math.sqrt((left-left0)*(left-left0)+(top-top0)*(top-top0))
var x=(left-left0)/2+left0-L/2;
var y=(top-top0)/2;
var deg=Math.atan((top-top0)/(left-left0))/Math.PI*180+'deg'
console.log(deg)
drag2.style.left=x+ 'px';
drag2.style.top=y+ 'px';
drag2.style.width=L+'px';
drag2.style.transform="rotate(" + deg + ")"
};
document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动
this.onmousemove = null;
this.onmouseup = null; //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
};
};
};
</script>
</body>
</html>
