Question

我正在绘制水平和垂直线，它对我来说工作正常，但我想要这个水平和垂直线可拖动，所以我可以在div中的任何地方移动它，我添加了jquery ui为此但线条仍然不能拖拽，任何人都可以帮助我，我该如何解决这个错误？
这是我的代码

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

Answer 1

基本上你的错误是你在尝试将线路拖动时尚未可用。添加后，您应该为每个新行执行此操作。

您可以通过触发事件或使用mutation observer（如果您不关心IE＆lt; 11）或者只是每次在drawLine函数中调用它来执行此操作。

此外，您可能应该禁止在拖动时绘制新线条，否则拖动现有线条将导致绘制新线条。

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

使用您的更新代码查看jsfiddle

draggable line在jquery中不起作用？

1 个答案: