How to draw line with mousemove event in jquery?

I am working on draw line with jquery, it is working fine for me, but issue is line is only visible when i do mouseup event, what i want to do when i do mousemove event, it line should have to be grow up, can anyone please help me how can i do this ? I have added my script here, just want to do with mousemove event, I want to do this with only jquery i don't want canvas, can anyone please help me for this ? thanks for your time

var coordinate = [];
            var count_line = 1;
            $("div").mousedown(function (event) {
                if(!$(event.target).hasClass('line')) {
                    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) {
                if(!$(event.target).hasClass('line')) {
                    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++;
                    $(".line").draggable();
                }
            });

            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) {
                
            });

.center-div {
                width: 80%;
                height: 80%;            
                background: grey;
                position: absolute;
                top:0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }

            .line{
                height: 47px;
                border-bottom: 1px solid black;
                position: absolute;
            }
            .line:hover {
                border: 1px dotted #000;
                background: white;
                padding: 2px;
                font-size: 1.2em;
                cursor: pointer;
            }

<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>
<div class="center-div"></div>