複数のカスタム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が整形式のjQueryセレクタではないため、$（newBox）が何も返さないということです。これは問題ありません。新しいボックスを使用して各ボックスに固有のクラスを返すためです。あなたがしなければならない

$('.' + newBox) 

他の質問とポインタのカップルであることをあなたが$（newBox）を持つ2つのスポットを修正です：

次の行に

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 
    } 
});