jQuery addClass example

Change class name on click in jQuery

by Pavlo

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mousemove demo</title>
    <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>
            
    </script>

    </body>
</html>

CSS

.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;
            }

JavaScript

var coordinate = [];
            var count_line = 1;
            var drawLineAllowed = true;
            $("div").mousedown(function (event) {
            	  if (!drawLineAllowed) return;
                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 (!drawLineAllowed) return;
                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);
                    var $newLine = $("<div class='line' draggable='true' id='line_" + count_line + "' />");
                    if (x_diff > y_diff)
                    {
                        if (start_x < end_x) {
  ...