How to execute code when multiple events are performed ie. mousemove whilst mouse is clicked

Basically I need some code to execute when the 开发者_开发百科mouse is clicked and being dragged around. With my current code the code executes when the mouse is down and when the mouse is moved but then when the mouse click is released the code continues to execute so I have included an if statement. I'm sure there is a much more efficient way of doing this so any help would be really appreciated :)

P.S another problem I am having is say the user clicks on the element, then lets go the mouseup ("//more code") gets executed once but if the user then clicks again and lets go it will be executed twice and if they select and deselect again 3 times etc.

As you can probably tell I am a bit of a jQuery noob! :P

Current code:

$('element').mousedown(function(event){
  mouseDown = true;
  $(document).mousemove(function(event2){
    if(mouseDown){
      //code goes here
     }
   }).mouseup(function(){
     mouseDown = false;
         //more code
   });
 });

"Another problem I am having is say the user clicks on the element, then lets go the mouseup ("//more code") gets executed once but if the user then clicks again and lets go it will be executed twice and if they select and deselect again 3 times etc."

That's because you're binding an event every time they press the mouse down; the first time it happens, you have one event handler. The next time, two event handlers. The third time, three event handlers. And so on. You'll want to call unbind() beforehand to remove the existing event handlers, then rebind them.

I have recently used the following code to create a draggable jquery extension. You can pass a target for the drag action.

(function ($) {
    var element;
    var target;
    var settings = {
        onDrop: function (x, y) { }
    };

    var methods = {
        init: function (options) {
            if (options) {
                $.extend(settings, options);
            }
            return this.each(function () {
                // Code here for each element found by the selector   
                element = $(this);

                if (options.target) {
                    target = $(options.target);
                }
                else {
                    target = element;
                }
                // Move the element by the amount of change in the mouse position  
                element.parent().mousedown(function (event) {

                    element.data('mouseMove', true);
                    element.data('mouseX', event.clientX);
                    element.data('mouseY', event.clientY);
                });

                element.parents(':last').mouseup(function () {
                    element.data('mouseMove', false);
                });

                element.mouseout(methods.move);
                element.mousemove(methods.move);


            });

        },
        move: function (event) {
            if (element.data('mouseMove')) {
                var changeX = event.clientX - element.data('mouseX');
                var changeY = event.clientY - element.data('mouseY');

                var newX = parseInt(target.css('margin-left')) + changeX;
                var newY = parseInt(target.css('margin-top')) + changeY;


                target.css({ 'margin-left': newX, 'margin-top': newY });

                settings.onDrop(newX, newY);
                element.data('mouseX', event.clientX);
                element.data('mouseY', event.clientY);
            }
        }
    };

    $.fn.draggable = function (method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.draggable');
            return null;
        }

    };
})(jQuery);

then call it like this:

$('#overlay').draggable({ target: "#imagebehide", onDrop: function (x, y) {
            $('#leftpos').val(x);
            $('#toppos').val(y);

        } });