Javascript 启用/禁用可提取div

我一直在试验这个可绘制的div函数，但我在隔离它时遇到了问题，因此它只在单击绘制按钮时被调用，而在单击开始按钮时被禁用

这是我的JQuery/Javascript

$(document).ready(function() {
  var drawable = false;

  $('.div-tool').click(function() {
    drawable = true;
  });

  $('.select-tool').click(function() {
    drawable = false;
  });

  function draw_a_box( e ) {

    var pageX = e.pageX,
        pageY = e.pageY,
        dpLast = dp.find('.drawnBox.last'),
        dpLast_data = dpLast.data();

    $('.drawnBox').css({
      'position': 'absolute',
      'z-index': '1',
      'border': '1px solid #222',
      'background': '#e1e1e1',
      'opacity': '0.5'
    });

    if ( e.type === 'mousemove' ) {

      // If ".drawnBox.last" doesn't exist, create it.
      if ( dpLast.length < 1 ) {
        $('<div class="drawnBox last"></div>').appendTo( dp );
      }

      var drawCSS = {};

      // If drawing is initiated.
      if ( draw ) {

        // Determine the direction.

        // xLeft
        if ( dpLast_data.pageX > pageX ) {
          drawCSS.right = dp.width() - dpLast_data.pageX,
            drawCSS.left = 'auto',
            drawCSS.width = dpLast_data.pageX - pageX;
        }
        // xRight
        else if ( dpLast_data.pageX < pageX ) {
          drawCSS.left = dpLast_data.pageX,
            drawCSS.right = 'auto',
            drawCSS.width = pageX - dpLast_data.pageX;
        }

        // yUp
        if ( dpLast_data.pageY > pageY ) {
          drawCSS.bottom = dp.height() - dpLast_data.pageY,
            drawCSS.top = 'auto',
            drawCSS.height = dpLast_data.pageY - pageY;
        }
        // yDown
        else if ( dpLast_data.pageY < pageY ) {
          drawCSS.top = dpLast_data.pageY,
            drawCSS.bottom = 'auto',
            drawCSS.height = pageY - dpLast_data.pageY;
        }

      }

      if ( !draw && dpLast.length > 0 ) {

        dpLast.css({
          top: pageY,
          left: pageX
        });
      }

      if ( draw ) {
        dpLast.css( drawCSS );
      } 

    }

    if ( e.type === 'mousedown' ) {

      e.preventDefault();
      draw = true;
      dpLast.data({ "pageX": pageX, "pageY": pageY });      

    }
    else if ( e.type === 'mouseup' ) {

      draw = false;
      dpLast.removeClass('last');

    }
  }

  if (drawable) {    
    var dp = $('#drawingArea'),
      draw = false,
      enabled = true;

      dp
       .css({ position: 'relative' })
       .on("mousemove mousedown mouseup", draw_a_box );
  }
});

$（文档）.ready（函数（）{
var drawable=false；
$（'.div工具'）。单击（函数（）{
可绘制=真；
});
$（'.select tool'）。单击（函数（）{
可绘制=假；
});
函数绘图框（e）{
var pageX=e.pageX，
pageY=e.pageY，
dpLast=dp.find（'.drawnBox.last'），
dpLast_data=dpLast.data（）；
$（'.drawnBox'）.css({
'位置'：'绝对'，
“z索引”：“1”，
“边框”：“1px实心#222”，
“背景”：“e1e1”，
“不透明度”：“0.5”
});
如果（e.type==='mousemove'）{
//如果“.drawnBox.last”不存在，请创建它。
如果（dpLast.length<1）{
$（''）。附录（dp）；
}
var drawCSS={}；
//如果绘图已启动。
如果（抽签）{
//确定方向。
//克列夫特
如果（dpLast_data.pageX>pageX）{
drawCSS.right=dp.width（）-dpLast_data.pageX，
drawCSS.left='auto'，
drawCSS.width=dpLast_data.pageX-pageX；
}
//对
否则如果（dpLast_data.pageXpageY）{
drawCSS.bottom=dp.height（）-dpLast_data.pageY，
drawCSS.top='auto'，
drawCSS.height=dpLast_data.pageY-pageY；
}
//伊敦
否则如果（dpLast_data.pageY0）{
dpLast.css({
上图：佩吉，
左：pageX
});
}
如果（抽签）{
css（drawCSS）；
} 
}
如果（e.type==='mousedown'）{
e、 预防默认值（）；
绘制=真；
dpLast.data（{“pageX”：pageX，“pageY”：pageY}）；
}
else if（e.type=='mouseup'）{
绘制=假；
dpLast.removeClass（'last'）；
}
}
如果（可提取）{
var dp=$（“#绘图区域”），
draw=false，
启用=真；
数据处理
.css（{位置：'相对'}）
.on（“mousemove mousedown mouseup”，画一个方框）；
}
});

$(function(){ // DOM ready

  var drawable = false,
      drawing  = false,
      mS = {},                      // mouse start 
      dBox;

  $('#drawingArea').mousedown(function( e ){
    if(drawable){
      drawing = true;
      mS.x = e.pageX;
      mS.y = e.pageY;
      dBox = $("<div class='drawnBox' />");
      $(this).append(dBox);
    }
  });

  $(document).mousemove(function(e){
    if(drawing && drawable){
      var mPos = {x:e.pageX, y:e.pageY};
      var css = {};
      css.left   = (mPos.x > mS.x) ? mS.x : mPos.x;
      css.top    = (mPos.y > mS.y) ? mS.y : mPos.y;
      css.width  = Math.abs(mPos.x - mS.x);
      css.height = Math.abs(mPos.y - mS.y);
      dBox.css(css);
    }
  }).mouseup(function(e){
    drawing  = false;
  });

  $('.div-tool').click(function(){
    drawable ^= 1;    // TOGGLE
  });  
  $('.select-tool').click(function() {
    drawable = false; // OFF
  });

}); // !DOM ready

$（函数（）{//DOM就绪
var drawable=false，
图纸=假，
mS={}，//鼠标开始
dBox；
$（“#绘图区域”）.mousedown（函数（e）{
如果（可提取）{
绘图=真；
mS.x=e.pageX；
mS.y=e.pageY；
dBox=$（“”）；
$（this.append（dBox）；
}
});
$（文档）.mousemove（函数（e）{
if（绘图和可绘图）{
var mPos={x:e.pageX，y:e.pageY}；
var css={}；
css.left=（mPos.x>mS.x）？mS.x:mPos.x；
css.top=（mPos.y>mS.y）？mS.y:mPos.y；
css.width=Math.abs（mPos.x-mS.x）；
css.height=Math.abs（mPos.y-mS.y）；
css（css）；
}
}).mouseup（函数（e）{
图纸=假；
});
$（'.div工具'）。单击（函数（）{
可绘制^=1；//切换
});  
$（'.select tool'）。单击（函数（）{
drawable=false；//关闭
});
}); // !DOM就绪

---

注意，我已经将.drawnBox CSS从jQ放到CSS中。

如何

drawable^=1切换单击事件？