Javascript 在没有jquery UI的情况下，如何在div中单击图像时调整图像大小

我有一个div，里面有一个图像。现在，当我单击图像时，我可以通过

$（this）

获得图像，并显示一个边框，让用户知道它可以调整大小

html:

然后我想在

mousedown

上获得初始x轴和y轴，并将其与

mousemove

进行比较。然后相应地更改图像的高度/宽度

$(document).mousemove(function (event) {
    if (clicking == true) {
        x_axis = event.pageX;
        y_axis = event.pageY;
        delta_x_axis = x_axis - initial_x_axis;
        delta_y_axis = initial_y_axis - y_axis;
    }
});

退房

但它也没有帮助，因为当我尝试拖动时，图像被选中。如何在单击图像的纵横比时调整图像的大小？我非常感谢你的帮助和指导。谢谢。

这是小提琴：

你们应该做你们的增强，现在它看起来真的很难看，但主要的原则是显示。要创建可拖动的行为，您应该使用一个切换到image

mousedown

事件和document

mouseup

的

boolean

切换器。您还应该通过调用

event.preventDefault

方法来取消默认的

mousedown

行为

 $(document).ready(function (event) {

    var x_axis;
    var y_axis;
    var initial_x_axis;
    var initial_y_axis;
    var isDragging = false; 
    $('#content img').mousedown(function (event) {        
        event.preventDefault();  
        isDragging = true;                      
        initial_x_axis = event.pageX;
        initial_y_axis = event.pageY;        
        $("#initial").text("initial-x: " + initial_x_axis + ", initial-y: " + initial_y_axis);
        $(this).addClass("resize_handler");
   });

    $(document).mouseup(function () {        
        isDragging = false;
    });

    $(document).mousemove(function (event) {
        if(isDragging) {
        x_axis = event.pageX;
        y_axis = event.pageY;
        var newWidth = $('#content img')[0].width / (initial_x_axis / x_axis);
        $('#content img').css('width', newWidth + 'px');            
    }             
});

---

}))

你可以用Jquery用户界面--@Tasos“而不用Jquery用户界面”…你用什么来拖动图片？因为如果它是jqueryui，它可能是一个更好的解决方案。无论如何，要防止拖动时单击，可以在拖动函数中使用（event.preventDefault（））---

$(document).mousemove(function (event) {
    if (clicking == true) {
        x_axis = event.pageX;
        y_axis = event.pageY;
        delta_x_axis = x_axis - initial_x_axis;
        delta_y_axis = initial_y_axis - y_axis;
    }
});

 $(document).ready(function (event) {

    var x_axis;
    var y_axis;
    var initial_x_axis;
    var initial_y_axis;
    var isDragging = false; 
    $('#content img').mousedown(function (event) {        
        event.preventDefault();  
        isDragging = true;                      
        initial_x_axis = event.pageX;
        initial_y_axis = event.pageY;        
        $("#initial").text("initial-x: " + initial_x_axis + ", initial-y: " + initial_y_axis);
        $(this).addClass("resize_handler");
   });

    $(document).mouseup(function () {        
        isDragging = false;
    });

    $(document).mousemove(function (event) {
        if(isDragging) {
        x_axis = event.pageX;
        y_axis = event.pageY;
        var newWidth = $('#content img')[0].width / (initial_x_axis / x_axis);
        $('#content img').css('width', newWidth + 'px');            
    }             
});