Question

我正在构建一个工具，通过单击并拖动鼠标可以绘制多个框（在本例中为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
                                }
                            });

请帮帮忙？

Answer 1

那真的很接近工作。下面的代码可以使用。

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

的两个位置

$('.' + newBox)

其他几个问题和指示：

为什么你有这条线

var increment = increment + 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
    }
});

创建多个自定义div jquery

1 个答案: