Blondinka,
копируйте начальные линии любое количество раз -- копии можно перемещать или удалить - и не грузите лишние jquery
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
function info(event, ui) {
var draggableLinePosition = $(ui.helper).offset();
$("#draggableLinePosition").text("y: " + draggableLinePosition.top + " x: " + draggableLinePosition.left)
}
$(".horizontal, .vertical").draggable({
"helper": "clone",
"drag": info,
"stop": function(event, ui) {
var element = $(ui.helper).clone();
var cls = $(this).is(".vertical") ? "vertical" : "horizontal";
element.appendTo(".container").attr({
"title": "Щелкните по направляющей дважды для её удаления или переместите."
}).css($(ui.helper).offset()).addClass(cls).dblclick(function(event) {
event.preventDefault();
var deleteLine = confirm("Вы, действительно, хотите удалить направляющую линию?");
if (deleteLine) $(this).remove()
}).draggable({
"drag": info
}).tooltip({ track: true,hide: { effect: "clip", duration: 800 }})
}
}).tooltip({ track: true,hide: { effect: "clip", duration: 800 }})
});
</script>
<style>
.horizontal { display: block;
position: absolute;
left: 0px;
right: 0px;
border-top: 2px solid #00f;
}
.vertical {
position: absolute;
border-right: 2px solid #00f;
top: 0;
bottom: 0;
z-index: 10;
}
.horizontal:hover, .vertical:hover{
border-top: 2px solid #f00;
border-right: 2px solid #f00;
color: #f00;
z-index: 10;
}
</style>
</head>
<body>
<span class="horizontal" title="перетащите меня"></span >
<span class="vertical" title="перетащите меня"></span >
<div class="container"></div>
<p id="draggableLinePosition">Text</p>
</body>
</html>