效果:
<!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>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body,
html {
width: 100%;
height: 100%;
}
.one {
position: absolute;
top: 100px;
left: 100px;
}
.two {
position: absolute;
top: 300px;
left: 300px;
cursor: pointer;
}
svg {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line id="line" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</body>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var startX = $(".one").offset().left + $(".one").width();
var startY = $(".one").offset().top + $(".one").height() / 2;
var endX = $(".two").offset().left;
var endY = $(".two").offset().top + $(".two").height() / 2;
// console.log(startX, startY, endX, endY);
$("#line").attr({ x1: startX, y1: startY, x2: endX, y2: endY });
var flag = false;
$(".two")[0].onmousedown = function() {
flag = true;
};
document.onmousemove = function() {
if (flag == true) {
// console.log("111111111");
var endX = event.clientX;
var endY = event.clientY;
// console.log("endX", endX);
// console.log("endY", endY);
$(".two").css({ left: endX, top: endY });
$("#line").attr({ x1: startX, y1: startY, x2: endX, y2: endY });
}
};
document.onmouseup = function() {
flag = false;
};
// $("#line").attr({ x1: "100", y1: "100", x2: "500", y2: "520" });
</script>
</html>