rotating div with mouse move

Question

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 bel

Answer 1

I think the problem was that when the native drag event (that dragged the image) was fired (on mouse down) it was preventing the mouse up event to be fired. So you just need to prevent the default action of the mouse down event.

Here you have a working example:

HTML:

    

        
    
​

Javascript:

$(document).ready(function() {
  // the same as yours.
  function rotateOnMouse(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)');
  }

  $('.drop div img').mousedown(function(e) {
    e.preventDefault(); // prevents the dragging of the image.
    $(document).bind('mousemove.rotateImg', function(e2) {
      rotateOnMouse(e2, $('.drop div img'));
    });
  });

  $(document).mouseup(function(e) {
    $(document).unbind('mousemove.rotateImg');
  });
});

Demo: http://jsfiddle.net/rwBku/13/

I have used jquery's namespaced events so you can unbind only the mousemove event that you want to.

Please note that the rotation of the image is buggy, but I really didn't look at that method.