Issue with custom drag and resize script not being smooth

Question

I am trying to build a simple image "click-n-drag" resize script. I do not want to use jquery UI because it adds alot of extra divs that clutter up the text and require extra steps to remove those extra divs.

This script works, however as you'll notice in the fiddle, it is very jumpy.

I have been trying to figure out how to get it so that it resizes ONLY on mouse move ONLY when the mouse is "down" (clicked) and upon mouseup, stop the resizing and reset the variables back to their original starting positions.

Thanks in advance. Sorry for the sloppy formatting in here, much more clean in fiddle.

Got the original code from here :originalsource I pasted the original so you could get a clear picture of it

Here is the jsfiddle: jsfiddle

jQuery.fn.extend({
    resize: function(params){
    var jQ = jQuery;
    return this.each(function(){
        var clicked = false; //set to off
        var start_x; //starting point of mouse
        var start_y; 
        if(params && params['target']){ var resize = params['target'];} //if target passed then use that
        else{ var resize = this; }
        if(params && typeof(params['y']) != "undefined"){ var y = params['y'];} //if y passed then fix the max height
        else{ var y = 1;}
        if(params && typeof(params['x']) != "undefined"){ var x = params['x'];} //if x then fix width
        else{ var x = 1;}
        if(params && typeof(params['min_width']) != "undefined"){ var min_w = params['min_width'];}
        else{ var min_w = 1;}
        if(params && typeof(params['min_height']) != "undefined"){ var min_h = params['min_height'];}
        else{ var min_h = 1;}

        $(this).hover(
                function(){$(this).css('cursor', 'move');},
                function(){$(this).css('cursor','default');clicked=false;}
                );          
        $(this).mousedown(function(e){
            clicked = true;
            start_x = Math.round(e.pageX - $(this).eq(0).offset().left);
            start_y = Math.round(e.pageY - $(this).eq(0).offset().top);
        });
        $(this).mouseup(function(e){clicked = false;});
        $(this).mousemove(function(e){
            if(clicked){
                var mouse_x = Math.round(e.pageX - $(this).eq(0).offset().left) - start_x;
                var mouse_y = Math.round(e.pageY - $(this).eq(0).offset().top) - start_y;
                var div_w = $(resize).width();
                var div_h = $(resize).height();
                var new_w = parseInt(div_w)+mouse_x;
                var new_h = parseInt(div_h)+mouse_y;    
                if(x==1 || (typeof(x) == "number" && new_w < x && new_w > min_w) ){ $(resize).css('width', new_w+"px"); }
                if(y==1 || (typeof(y) == "number" && new_h < y && new_h > min_h) ){ $(resize).css('height',new_h+"px"); }
                start_x = Math.round(e.pageX - $(this).eq(0).offset().left);
                start_y = Math.round(e.pageY - $(this).eq(0).offset().top);
            }
        });                 
});
}
});

Answer 1

I found that having both hover and mousedown/mouseup events changing the clicked var will make it a little jumpy as you notice.

I changed it to using dblclick() for selecting the image and then click() for unselecting making the function more intuitive. So I replaced your lines from $(this).hover (... with:

...

$(this).dblclick(function(e){
    $(this).css('cursor', 'move');
    clicked = true;
    start_x = Math.round(e.pageX - $(this).eq(0).offset().left);
    start_y = Math.round(e.pageY - $(this).eq(0).offset().top);
});
$(this).click(function(){
    $(this).css('cursor','default');
    clicked=false;
});

The problem is that when the mouse leaves the image then the $(this).mousemove(function(e){... function halts, instead target the window then mouse position will be more predictable:

$(window).mousemove(function(e){ ...

To make it reference the image where required then I added a new variable for this, image.

I also cleaned up the code with dot notation for params.

See my working edit here: http://jsfiddle.net/a3vYu/15/