创建多个自定义div div jquery

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增量=增量+1; ？

这声明增加是一个局部变量，因此它返回“男”

而且，拖放块只有当鼠标从左上到右下去上班。

无论如何，祝你好运。

$('#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 
    } 
});