我正在努力绘制水平线和垂直线,这对我来说很好,但我想做这个水平线和垂直线可以拖动,这样我就可以将它移动到div中的任何地方,我为此添加了jquery ui,但线仍然不能拖动,有人能帮我解决这个错误吗?
这是我的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mousemove demo</title>
<style>
.center-div {
width: 80%;
height: 80%;
background: grey;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
p {
margin: 0;
margin-left: 10px;
color: red;
width: 220px;
height: 120px;
padding-top: 70px;
float: left;
font-size: 14px;
}
span {
display: block;
}
.line{
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="center-div"></div>
<script>
var coordinate = [];
var count_line = 1;
$("div").mousedown(function (event) {
var parentOffset = $(this).parent().offset();
var relX = event.pageX - parentOffset.left;
var relY = event.pageY - parentOffset.top;
var temp_array = [];
temp_array['X'] = (event.pageX - $(this).offset().left);
temp_array['Y'] = event.pageY - $(this).offset().top;
coordinate.push(temp_array);
});
$("div").mouseup(function (event) {
var parentOffset = $(this).parent().offset();
var relX = event.pageX - parentOffset.left;
var relY = event.pageY - parentOffset.top;
var temp_array = [];
temp_array['X'] = (event.pageX - $(this).offset().left);
temp_array['Y'] = event.pageY - $(this).offset().top;
coordinate.push(temp_array);
drawLine();
coordinate = [];
count_line++;
});
function drawLine() {
console.log(coordinate);
if (coordinate.length > 1)
{
var start_x = coordinate[0]['X'];
var start_y = coordinate[0]['Y'];
var end_x = coordinate[1]['X'];
var end_y = coordinate[1]['Y'];
var x_diff = Math.abs(parseInt(end_x) - parseInt(start_x));
var y_diff = Math.abs(parseInt(end_y) - parseInt(start_y));
console.log(x_diff + ' - ' + y_diff);
if (x_diff > y_diff)
{
if (start_x < end_x) {
var width = parseInt(end_x) - parseInt(start_x);
$(".center-div").append("<div class='line' draggable='true' id='line_" + count_line + "' />");
$("div #line_" + count_line).css("position", "absolute");
$("div #line_" + count_line).css("left", start_x + "px");
$("div #line_" + count_line).css("top", end_y + "px");
$("div #line_" + count_line).css("width", width + "px");
$("div #line_" + count_line).css("border", "1px solid black");
$("div #line_" + count_line).css("height", "0px");
} else if (start_x > end_x) {
var width = parseInt(start_x) - parseInt(end_x);
$(".center-div").append("<div class='line' draggable='true' id='line_" + count_line + "' />");
$("div #line_" + count_line).css("position", "absolute");
$("div #line_" + count_line).css("left", end_x + "px");
$("div #line_" + count_line).css("top", end_y + "px");
$("div #line_" + count_line).css("width", width + "px");
$("div #line_" + count_line).css("border", "1px solid black");
$("div #line_" + count_line).css("height", "0px");
}
}
else
{
if (start_y < end_y) {
var height = parseInt(end_y) - parseInt(start_y);
$(".center-div").append("<div class='line' draggable='true' id='line_" + count_line + "' />");
$("div #line_" + count_line).css("position", "absolute");
$("div #line_" + count_line).css("top", start_y + "px");
$("div #line_" + count_line).css("left", start_x + "px");
$("div #line_" + count_line).css("height", height + "px");
$("div #line_" + count_line).css("width", "0px");
$("div #line_" + count_line).css("border", "1px solid black");
} else if (start_y > end_y) {
var height = parseInt(start_y) - parseInt(end_y);
$(".center-div").append("<div class='line' draggable='true' id='line_" + count_line + "' />");
$("div #line_" + count_line).css("position", "absolute");
$("div #line_" + count_line).css("top", end_y + "px");
$("div #line_" + count_line).css("left", start_x + "px");
$("div #line_" + count_line).css("height", height + "px");
$("div #line_" + count_line).css("width", "0px");
$("div #line_" + count_line).css("border", "1px solid black");
}
}
coordinate = [];
}
}
$("div").mousemove(function (event) {
});
$(function () {
$(".line").draggable();
});
</script>
</body>
</html>
