問題與自定義拖動和調整大小腳本不平滑

Question

我想構建一個簡單的圖像「點擊拖拽」調整大小的腳本。我不想使用jQuery UI，因爲它添加了很多額外的div，使文本混亂，並需要額外的步驟來刪除這些額外的div。

這個腳本的作品，但是你會發現在小提琴中，它是非常跳動。

我一直在試圖弄清楚如何獲得它，以便它只在鼠標移動時調整大小，只有當鼠標「下」（單擊）並且在mouseup時，停止調整大小並將變量重置回原始起始位置。

在此先感謝。對不起，這裏草率的格式，更乾淨的小提琴。

得到了原代碼從這裏：originalsource 我粘貼原來如此，你可以得到它

這裏清晰的畫面是的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

我發現，同時具有懸停和更改clicked var的mousedown/mouseup事件會讓你感覺有些激動。

我改爲使用dblclick()選擇圖像，然後click()取消選擇使功能更直觀。所以我代替你的線條從$(this).hover (...有：

... 

$(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; 
}); 

的問題是，當鼠標離開圖像則$（本）.mousemove（函數（E）{...功能暫停，而不是針對窗口然後鼠標位置將是更加可預測：

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

爲了使它引用在需要然後我添加這個新的變量，image

我還清理與PARAMS點符號的代碼的圖像。

看到我的工作編輯在這裏：http://jsfiddle.net/a3vYu/15/