可拖动行在jquery中不起作用？_Jquery_Jquery Ui

可拖动行在jquery中不起作用？

jquery jquery-ui

可拖动行在jquery中不起作用？,jquery,jquery-ui,Jquery,Jquery Ui,我正在努力画水平线和垂直线，这对我来说很好，但我想做这个水平线和垂直线拖动，这样我就可以将它移动到div中的任何地方，我为此添加了jquery ui，但线仍然不能拖动，有人能帮我解决这个错误吗这是我的代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>mousemove demo</title> &

我正在努力画水平线和垂直线，这对我来说很好，但我想做这个水平线和垂直线拖动，这样我就可以将它移动到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>


鼠标移动演示
.中央分区{
宽度：80%；
身高：80%；
背景：灰色；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
p{
保证金：0；
左边距：10px；
颜色：红色；
宽度：220px；
高度：120px；
填充顶部：70px；
浮动：左；
字体大小：14px；
}
跨度{
显示：块；
}
.线路{
高度：47px；
边框底部：1px纯黑；
位置：绝对位置；
}
var坐标=[]；
var count_line=1；
$（“div”）.mousedown（函数（事件）{
var parentOffset=$（this.parent（）.offset（）；
var relX=event.pageX-parentOffset.left；
var relen=event.pageY-parentOffset.top；
var temp_数组=[]；
temp_数组['X']=（event.pageX-$（this.offset（）.left）；
temp_数组['Y']=event.pageY-$（this）.offset（）.top；
坐标推送（临时数组）；
});
$（“div”）.mouseup（函数（事件）{
var parentOffset=$（this.parent（）.offset（）；
var relX=event.pageX-parentOffset.left；
var relen=event.pageY-parentOffset.top；
var temp_数组=[]；
temp_数组['X']=（event.pageX-$（this.offset（）.left）；
temp_数组['Y']=event.pageY-$（this）.offset（）.top；
坐标推送（临时数组）；
抽绳（）；
坐标=[]；
计数线++；
});
函数drawLine（）{
控制台日志（坐标）；
如果（坐标长度>1）
{
var start_x=坐标[0]['x']；
var start_y=坐标[0]['y']；
var end_x=坐标[1]['x']；
var end_y=坐标[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）；
如果（x_diff>y_diff）
{
如果（开始\u x<结束\u x）{
var width=parseInt（end_x）-parseInt（start_x）；
$（“.center div”）。追加（“”）；
$（“div#line uu”+count u line）.css（“位置”、“绝对”）；
$（“div#line u”+count u line）.css（“左”，start x+“px”）；
$（“div#line u”+count u line）.css（“top”，end y+“px”）；
$（“div#line uu”+count u line）.css（“width”，width+“px”）；
$（“div#line u”+count u line）.css（“边框”，“1px纯黑”）；
$（“div#line uu”+count u line）.css（“height”，“0px”）；
}否则如果（开始>结束）{
var width=parseInt（start_x）-parseInt（end_x）；
$（“.center div”）。追加（“”）；
$（“div#line uu”+count u line）.css（“位置”、“绝对”）；
$（“div#line u”+count u line）.css（“左”，end x+“px”）；
$（“div#line u”+count u line）.css（“top”，end y+“px”）；
$（“div#line uu”+count u line）.css（“width”，width+“px”）；
$（“div#line u”+count u line）.css（“边框”，“1px纯黑”）；
$（“div#line uu”+count u line）.css（“height”，“0px”）；
}
}
其他的
{
如果（开始时间<结束时间）{
var height=parseInt（end_y）-parseInt（start_y）；
$（“.center div”）。追加（“”）；
$（“div#line uu”+count u line）.css（“位置”、“绝对”）；
$（“div#line u”+count u line）.css（“top”，start y+“px”）；
$（“div#line u”+count u line）.css（“左”，start x+“px”）；
$（“div#line uu”+count u line）.css（“height”，height+“px”）；
$（“div#line_uu”+count_uline）.css（“width”，“0px”）；
$（“div#line u”+count u line）.css（“边框”，“1px纯黑”）；
}否则如果（开始>结束）{
变量高度=parseInt（开始时间）－parseInt（结束时间）；
$（“.center div”）。追加（“”）；
$（“div#line uu”+count u line）.css（“位置”、“绝对”）；
$（“div#line u”+count u line）.css（“top”，end y+“px”）；
$（“div#line u”+count u line）.css（“左”，start x+“px”）；
$（“div#line uu”+count u line）.css（“height”，height+“px”）；
$（“div#line_uu”+count_uline）.css（“width”，“0px”）；
$（“div#line u”+count u line）.css（“边框”，“1px纯黑”）；
}
}
坐标=[]；
}
}
$（“div”）.mousemove（函数（事件）{
});
$（函数（）{
$（“.line”）.draggable（）；
});

基本上是你的错误

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