Форум

Blondinka · #1 (**permalink**) 10.04.2015, 22:17

Здравствуйте. Хочу заставить программу генерировать любое количество линий, но получается только одна (по одной на каждую направляющую). Код работает, но 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>

рони · #2 (**permalink**) 11.04.2015, 01:25

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>

Blondinka · #3 (**permalink**) 11.04.2015, 12:32

рони,
спасибо.

Форум

Справочник

Discord чат

Курсы javascript