Javascript 创建多个自定义div jquery

我正在构建一个工具，通过单击并拖动鼠标可以绘制多个框（本例中为div）。我希望每次调用函数时都绘制一个新的div。但就我现在所拥有的，我无法使div的高度和宽度跟随鼠标的移动

这是我的密码：

$('#work_area').click(function(e) {
                                var increment = increment + 1; //has been defined in the global scope
                                var newBox = 'newBox' + increment;
                                var workAreaOffset = $('#work_area').offset();
                                if (ctr == 0) {

                                    var clickLocX = e.pageX; //x coordinate of origin of select box
                                    var clickLocY = e.pageY; //y coordinate of origin of select box

                                    $('<div>').attr({
                                        'class':'newBox',
                                        zIndex:'15'
                                    })
                                    .addClass(newBox) //set new class for every box
                                    .css({
                                        top:clickLocY - workAreaOffset.top,
                                        left:clickLocX - workAreaOffset.left
                                    })
                                    .appendTo('#work_area');

                                    ctr = 1; //next stage of select box method reached

                                    if (ctr == 1) {
                                        $('#work_area').mousemove(function(e){
                                            var XpageCoord = e.pageX;
                                            var YpageCoord = e.pageY;

                                            var boxHeight = YpageCoord - clickLocY; //height of the box changes with mouse movement
                                            var boxWidth = XpageCoord - clickLocX;  //width of the box changes with mouse movement

                                            $(newBox).css({
                                                height:boxHeight + 'px',          //connect mouse movement with css class for select box
                                                width:boxWidth + 'px'
                                            });
                                            ctr = 2; //next stage of the select box method reached
                                        });
                                    }
                                }
                                else if (ctr == 2) {
                                    //$('.newBox').remove(); //select box removed with second click
                                    $('#work_area').css({
                                        cursor: 'default'  //cursor changed back to normal
                                    });

                                    $('#work_area').unbind('mousemove'); //mouse movement no longer has effect

                                    $(newBox).appendTo('#work_area');

                                    ctr = 0; //reset
                                }
                                else {
                                    $.noop(); //fall back
                                }
                            });

$（“#工作区”）。单击（功能（e）{
var increment=increment+1；//已在全局范围中定义
变量newBox=‘newBox’+增量；
var workAreaOffset=$（“#工作区”）.offset（）；
如果（ctr==0）{
var clickLocX=e.pageX；//x选择框原点坐标
var clickLocY=e.pageY；//选择框原点的y坐标
$（''）.attr({
'class'：'newBox'，
津德克斯：“15”
})
.addClass（newBox）//为每个框设置新类
.css({
顶部：单击LOCY-工作区偏移。顶部，
左：单击LOCX-工作区偏移。左
})
.附于（“#工作区”）；
ctr=1；//已达到选择框方法的下一阶段
如果（ctr==1）{
$（“#工作区”）.mousemove（函数（e）{
var XpageCoord=e.pageX；
var YpageCoord=e.pageY；
var boxHeight=YpageCoord-clickLocY；//框的高度随鼠标移动而变化
var boxWidth=XpageCoord-clickLocX；//框的宽度随鼠标移动而变化
$（newBox）.css({
高度：boxHeight+'px'，//将鼠标移动与选择框的css类连接起来
宽度：boxWidth+‘px’
});
ctr=2；//已达到选择框方法的下一阶段
});
}
}
否则如果（ctr==2）{
//$（'.newBox'）.remove（）；//通过第二次单击删除选择框
$（“#工作区”）.css({
游标：“默认值”//游标更改回正常值
});
$（“#工作区”）。解除绑定（'mousemove'）；//鼠标移动不再有效
$（新箱）。附加到（“#工作区”）；
ctr=0；//重置
}
否则{
$.noop（）；//后退
}
});

---

请帮帮我？

这真的很接近成功了。下面的代码将起作用

主要问题是$（newBox）没有返回任何内容，因为变量newBox不是格式良好的jQuery选择器。这很好，因为您使用newBox为每个框返回一个唯一的类。你所要做的就是修改你有$（newBox）的两个位置

其他几个问题和要点：

你为什么要排队

var增量=增量+1

这将增量声明为局部变量，因此它返回“NaN”

此外，只有当鼠标从左上到右下移动时，拖放块才能工作

无论如何，祝你好运

$('#work_area').click(function(e) {
    increment = increment + 1; //has been defined in the global scope
    var newBox = 'newBox' + increment;
    var workAreaOffset = $('#work_area').offset();
    if (ctr == 0) {

        var clickLocX = e.pageX; //x coordinate of origin of select box
        var clickLocY = e.pageY; //y coordinate of origin of select box

        $('<div>').attr({
            'class':'newBox',
            zIndex:'15'
        })
        .addClass(newBox) //set new class for every box
        .css({
            top:clickLocY - workAreaOffset.top,
            left:clickLocX - workAreaOffset.left
        })
        .appendTo('#work_area');

        ctr = 1; //next stage of select box method reached

        if (ctr == 1) {
            $('#work_area').mousemove(function(e){
                var XpageCoord = e.pageX;
                var YpageCoord = e.pageY;

                var boxHeight = YpageCoord - clickLocY; //height of the box changes with mouse movement
                var boxWidth = XpageCoord - clickLocX;  //width of the box changes with mouse movement

                $('.' + newBox).css({
                    height:boxHeight + 'px',          //connect mouse movement with css class for select box
                    width:boxWidth + 'px'
                });
                ctr = 2; //next stage of the select box method reached
            });
        }
    }
    else if (ctr == 2) {
        //$('.newBox').remove(); //select box removed with second click
        $('#work_area').css({
            cursor: 'default'  //cursor changed back to normal
        });

        $('#work_area').unbind('mousemove'); //mouse movement no longer has effect

        $('.' + newBox).appendTo('#work_area');

        ctr = 0; //reset
    }
    else {
        $.noop(); //fall back
    }
});

$（“#工作区”）。单击（功能（e）{
increment=increment+1；//已在全局范围中定义
变量newBox=‘newBox’+增量；
var workAreaOffset=$（“#工作区”）.offset（）；
如果（ctr==0）{
var clickLocX=e.pageX；//x选择框原点坐标
var clickLocY=e.pageY；//选择框原点的y坐标
$（''）.attr({
'class'：'newBox'，
津德克斯：“15”
})
.addClass（newBox）//为每个框设置新类
.css({
顶部：单击LOCY-工作区偏移。顶部，
左：单击LOCX-工作区偏移。左
})
.附于（“#工作区”）；
ctr=1；//已达到选择框方法的下一阶段
如果（ctr==1）{
$（“#工作区”）.mousemove（函数（e）{
var XpageCoord=e.pageX；
var YpageCoord=e.pageY；
var boxHeight=YpageCoord-clickLocY；//框的高度随鼠标移动而变化
var boxWidth=XpageCoord-clickLocX；//框的宽度随鼠标移动而变化
$（'.+newBox）.css({
高度：boxHeight+'px'，//将鼠标移动与选择框的css类连接起来
宽度：boxWidth+‘px’
});
ctr=2；//已达到选择框方法的下一阶段
});
}
}
否则如果（ctr==2）{
//$（'.newBox'）.remove（）；//通过第二次单击删除选择框
$（“#工作区”）.css({
游标：“默认值”//游标更改回正常值
});
$（“#工作区”）。解除绑定（'mousemove'）；//鼠标移动不再有效
$（'..+新箱）。附加到（'#工作区'）；
ctr=0；//重置
}
否则{
$.noop（）；//后退
}
});

如果您将所有这些都放在jsFiddle.com上，那么我们就可以

$('#work_area').click(function(e) {
    increment = increment + 1; //has been defined in the global scope
    var newBox = 'newBox' + increment;
    var workAreaOffset = $('#work_area').offset();
    if (ctr == 0) {

        var clickLocX = e.pageX; //x coordinate of origin of select box
        var clickLocY = e.pageY; //y coordinate of origin of select box

        $('<div>').attr({
            'class':'newBox',
            zIndex:'15'
        })
        .addClass(newBox) //set new class for every box
        .css({
            top:clickLocY - workAreaOffset.top,
            left:clickLocX - workAreaOffset.left
        })
        .appendTo('#work_area');

        ctr = 1; //next stage of select box method reached

        if (ctr == 1) {
            $('#work_area').mousemove(function(e){
                var XpageCoord = e.pageX;
                var YpageCoord = e.pageY;

                var boxHeight = YpageCoord - clickLocY; //height of the box changes with mouse movement
                var boxWidth = XpageCoord - clickLocX;  //width of the box changes with mouse movement

                $('.' + newBox).css({
                    height:boxHeight + 'px',          //connect mouse movement with css class for select box
                    width:boxWidth + 'px'
                });
                ctr = 2; //next stage of the select box method reached
            });
        }
    }
    else if (ctr == 2) {
        //$('.newBox').remove(); //select box removed with second click
        $('#work_area').css({
            cursor: 'default'  //cursor changed back to normal
        });

        $('#work_area').unbind('mousemove'); //mouse movement no longer has effect

        $('.' + newBox).appendTo('#work_area');

        ctr = 0; //reset
    }
    else {
        $.noop(); //fall back
    }
});