Question

我正在尝试构建一个简单的图像“click-n-drag”resize脚本。我不想使用jquery UI，因为它添加了许多额外的div，这些div会使文本变得混乱，并需要额外的步骤来删除那些额外的div。

这个剧本有效，但正如你在小提琴中注意到的那样，它非常有弹性。

我一直试图找出如何获取它，以便仅在鼠标移动时仅在鼠标“向下”（单击）时调整大小，并在鼠标上移动时，停止调整大小并将变量重置回原始起始位置。

提前致谢。对不起这里的草率格式，小提琴更干净。

从这里获得原始代码：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

我发现将hover和mousedown / mouseup事件都改变clicked var会让你看起来有点跳跃。

我将其更改为使用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;
});

问题在于，当鼠标离开图像时，$（this）.mousemove（函数（e）{...函数暂停，而不是目标窗口，那么鼠标位置将更加可预测：

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

为了让它在需要时引用图像，我为此添加了一个新变量image。

我还用para符号用点符号清理代码。

在此处查看我的工作编辑：http://jsfiddle.net/a3vYu/15/

自定义拖动和调整大小脚本不顺畅的问题

1 个答案: