stack exchange drag box

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.13.1/css/ol.css">
<script src="http://openlayers.org/en/v3.13.1/build/ol-debug.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div  id="map"></div>

CSS

.ol-dragbox {
   background-color: rgba(255,0,0,0.4);
   border-color: rgba(255,0,0,1);
   border-style: dashed;
   border-width:2px;
}
      
.ol-mydragbox {
  background-color: rgba(0,255,0,0.4);
  border-color: rgba(0,255,0,1);
  border-style: dashed;
  border-width:2px;
}

JavaScript

var raster =  new ol.layer.Tile({
      source: new ol.source.OSM()
    });



var map = new ol.Map({
 layers: [raster],
  target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
 })
});

var selectOnBoxInt = new ol.interaction.DragBox({
  condition  : ol.events.condition.always
});

map.addInteraction(selectOnBoxInt);

selectOnBoxInt.setActive(true);
selectOnBoxInt.on('boxdrag',function(e){
console.log("changed");
console.log(e);
  var width = Math.abs(e.target.box_.endPixel_[0] - e.target.box_.startPixel_[0]);
  var height = Math.abs(e.target.box_.endPixel_[1] - e.target.box_.startPixel_[1]);
  console.log(width);
  console.log(height);
  
  if (width>100 && height>100){
  console.log("chaning color");
  console.log("getProperties",e.target.getProperties())
  $('.ol-dragbox').removeClass('ol-dragbox').addClass('ol-mydragbox');
  $('.ol-box').removeClass('ol-box').addClass('ol-mydragbox');
  } else {
  $('.ol-mydragbox').removeClass('ol-mydragbox').addClass('ol-dragbox');
  }
})