0

I need to detect the mouse pressed event in jQuery. I see this question and it's answer. It is the exact one I needed, because here the action is happen only if the mouse is pressed and moved. It is not a click event, it is combined mouse press and move event.

I don't understand how to implement it. Currently I rotate the div using the following code, but this code is based on the mousedown event:

var rotation = 0;
jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};
                    
$('.resizeButton').on("mousedown", function(e) {
    var startX = e.pageX;
    $(document).mousemove(function(e){
        rotation = startX - e.pageX;
        $('.test').rotate(rotation);
    });
});
$('.resizeButton').on("mouseup", function(){
    $(document).unbind( "mousemove" );
});
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hello
    <button class="resizeButton"> </button>
</div>

Please help to convert it to mouse press and move event, so that the user can easily adjust the rotation by pressing that button and rotate to any direction and release the mouse press. When the user releases the mouse press and then rotation needs to set on that particular mouse press release point.

Community
  • 1
  • 1

1 Answers1

1

There are some issues in your code.

First of all, the "mouseup" event handler doesn't get fired because your mouse isn't over the checkbox when you release the mouse. You have to bind the event to the document for example.

Then, instead of binding and unbinding event handlers, it's probably easier to store the state of the mouse, and rotate only if the mouse is pressed.

var rotation = 0;
var rotating = false;
var startX = 0;

jQuery.fn.rotate = function(degrees) {
  $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};
                    
$(document).mousemove(function(e){
  if (!rotating) return;
  rotation = startX - e.clientX;
  $('.test').rotate(rotation);      
});

$(document).on("mouseup", function(){
  rotating = false;
});

$('.resizeButton').on("mousedown", function(e) {
  rotating = true;
  startX = e.clientX;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hello 

<button class="resizeButton"> </button></div>

To have the button follow the mouse pointer during rotation, you would probably need to use some sin and cos functions to determine the angle of rotation, and you'd probably need to adjust the radius too.

Jose Faeti
  • 12,126
  • 5
  • 38
  • 52
  • 1
    Thank you friend . Your code is awesome . This is the one that i wanted . –  Oct 26 '16 at 06:58
  • Hi, could you please help to solve this issue in this js fiddle https://jsfiddle.net/felixtm/jaboLc3u/20/ –  Oct 26 '16 at 09:21
  • @Felix You didn't specify what the issue you are facing is. What exactly isn't working as intended? Please ask another question for this problem, including this fiddle, so that it's easier for people to help :) – Jose Faeti Oct 26 '16 at 09:35
  • sure . I will ask other question and give link . Please help to solve that issue –  Oct 26 '16 at 09:36
  • Please see this question http://stackoverflow.com/questions/40259059/misbehaviour-of-other-elemnt-after-using-jquery-rotation –  Oct 26 '16 at 09:53
  • Hi, But in the answer there is a problem . When user click on button and rotate at firs time then it is ok . But after the first rotation then user click on the button then again rotation starting from the first –  Oct 26 '16 at 12:43