Здравствуйте. Хочу заставить программу генерировать любое количество линий, но получается только одна (по одной на каждую направляющую). Код работает, но 1 раз. Где ошибка?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<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 type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
$(document).ready(function(){
$("#addVerticalGuideRail").click(function(){/*При щелчке по этой направляющей, создать её перемещаемую копию.*/
$("div").append("<span class='vertical draggable' title='Щелкните по направляющей дважды для её удаления.'></span>");
});
$("#addHorizontalGuideRail").click(function(){/*При двойном щелчке по любой из направляющих, предложить пользователю её удалить.*/
$("div").append("<span class='horizontal draggable' title='Щелкните по направляющей дважды для её удаления.'></span>");
});
$( ".draggable" ).draggable();/*Перемещаемый класс.*/
$(".horizontal, .vertical").dblclick(function(){/*При двойном щелчке по любой из направляющих, предложить пользователю её удалить.*/
var deleteLine = confirm("Вы, действительно, хотите удалить направляющую линию?");
if(deleteLine){
$(this).remove();
}
});
$(function() {
$(".horizontal, .vertical").draggable({
drag: function() {
var draggableLinePosition = $(this).position();
$("#draggableLinePosition").text("y: " + draggableLinePosition.top + " x: " + draggableLinePosition.left);
}
});
});
});
</script>
<style>
.horizontal {
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 id="addHorizontalGuideRail" class="draggable horizontal"></span>
<span id="addVerticalGuideRail" class="draggable vertical"></span>
<div></div>
<p id="draggableLinePosition">Text</p>
</body>
</html>