1

So far I have a circle with a marker.

http://jsfiddle.net/x5APH/1/

I would like to grab and drag the marker around the circle, however the current functionality only nudges the marker when you click it.

What changes can I make to the code so that the marker can be dragged around the circle while the mouse is held down?

Note

If you could update the fiddle with your solution I would greatly appreciate it.

user784637
  • 15,392
  • 32
  • 93
  • 156

2 Answers2

5

changed some code

        $(document).ready(function(){               

            $('#marker').on('mousedown', function(){
                $('body').on('mousemove', function(event){
                    rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('#marker'));    
                });

            });                    
        }); ​

also add this code 

$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});

in the function

this is the jsfiddle http://jsfiddle.net/sandeeprajoria/x5APH/11/

Sandeep Rajoria
  • 1,243
  • 8
  • 14
  • Thanks Sandeep, This was exactly what I was looking for. I replaced the `$('body')` selector with `$(document)` just so the movement can continue if someone goes outside the browser window – user784637 Apr 13 '12 at 23:25
  • There's one problem with my code http://jsfiddle.net/x5APH/16/, I noticed that you need to click directly on the middle of the block to move it. Is there a way I can click on a corner of it to move it fluidly? – user784637 Apr 13 '12 at 23:29
  • well I tried clicking on the corner of the box...it seems to work fine...what exactly are you looking for.... – Sandeep Rajoria Apr 13 '12 at 23:36
  • Hmm, I don't know why, but sometimes when I click it and then move the cursor immediately after, the cursor gets stuck. I noticed this occur in firefox more than in chrome or ie – user784637 Apr 13 '12 at 23:52
0

To do anything of this sort:

On mousedown on the desired element, set:

  • mousemove event on the document to update the position of the target
  • mouseup event on the document to remove the mousemove and mouseup events you just set.

Example in plain JS:

elem.onmousedown = function() {
    document.body.onmousemove = function(e) {
        e = e || window.event;
        // do stuff with e
    };
    document.body.onmouseup = function() {
        document.body.onmousemove = document.body.onmouseup = null;
    };
};

Personally I like to improve this further by creating a "mask" element over the whole page to capture events, so that (for example) dragging a selection or image does not trigger default browser actions (which are strangely immune to all event cancelling methods in this case...)

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Thanks Kolink for the `mousemove` and `mouseup` concept. Would you be able to update the fiddle if you have the time? – user784637 Apr 13 '12 at 22:35
  • Unfortunately not, because I adamantly refuse to use jQuery (for a number of very good reasons). The concept isn't too hard, especially since you already have the code to do the movement. Just remove the current `onclick`, and replace it with the structure I gave in the answer. – Niet the Dark Absol Apr 13 '12 at 22:57
  • @Kolink, I would like to hear some of these reason why you refuse to use jQuery, I am personally a user of it but I have never heard of a reason not to use it, and would appreciate hearing some. – Dale Apr 13 '12 at 23:15
  • @Dale Such a conversation would be off-topic here. However you are more than welcome to contact me at the email address on my profile page to discuss this matter. – Niet the Dark Absol Apr 13 '12 at 23:55