title: rotating div with mouse move
body: <p>I have the following code to rotate a div. By mousedown event on the image in the upper-right corner of the same div. I want the div to rotate till mouse up. logically I believe the code is fine but it works after a click. Instead of mouseup the rotation stops when I click on an other item. I think on dragging after mouse down the browser tries to drag the image but I need help.. thanks in advance :)</p>
  
  <pre><code>fl_rotate: false,
  rotdivs: function() {
      var pw;
      var oThis = this;
      $('.drop div img').mousedown(function(e) {
          oThis.destroyDragResize();
          oThis.fl_rotate = true;
          return;
      });
      $(document).mousemove(function(e) {
          if (oThis.fl_rotate) {
              var element = $(oThis.sDiv);
              oThis.rotateOnMouse(e, element);
          }
      });
      $(document).mouseup(function(e) {
          if (oThis.fl_rotate) {
              oThis.initDragResize();
              var ele = $(oThis.sDiv);
              ele.unbind('mousemove');
              ele.draggable({
                  containment: 'parent'
              });
              ele = 0;
              oThis.fl_rotate = false;
          }
      });
  },
  rotateOnMouse: function(e, pw) {
      var offset = pw.offset();
      var center_x = (offset.left) + ($(pw).width() / 2);
      var center_y = (offset.top) + ($(pw).height() / 2);
      var mouse_x = e.pageX;
      var mouse_y = e.pageY;
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
      var degree = (radians * (180 / Math.PI) * -1) + 100;
      //            window.console.log("de="+degree+","+radians);
      $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
  }​
  </code></pre>