CODEWITHSUNDEEP
jqueryjquery-ui
Tirkesh Turkesh
Tirkesh Turkesh

Reputation: 241

draggable line is not working in jquery?

I am working on to draw horizontal and vertical line, it is working fine for me, but i want to do this horizontal and vertical lines draggable so i can move it anywhere in the div, I added jquery ui for this but lines still not draggable, can anyone please help me how can i resolve this error ?
here is my code for that

<!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>

Upvotes: 0

Views: 301

Answers (1)

paulitto
paulitto

Reputation: 4673

Basically your mistake is that you are trying to make line draggable while it is not yet available. You should do that for each new line after it is added.

You can do that either by triggering events, or using mutation observer (if you don't care about IE<11) or simply by calling it every time in your drawLine function.

Also you should probably disallow drawing new lines while dragging, otherwise dragging existing line will result in new line drawn.

$newLine.draggable({
    start: function() {
        drawLineAllowed = false;
    },
    stop: function() {
        drawLineAllowed = true;
    }
});

see jsfiddle with your updated code

Upvotes: 1

Related Questions