javascript - 如何在没有 jquery UI 的情况下在 div 中单击时使图像可调整大小

Question

我有一个 div，里面有一张图片。现在，当我单击图像时，我可以通过 $(this) 获取图像并显示一个边框，让用户知道它可以调整大小。

html:

<div id="content">
    <p>Something <img src="http://placehold.it/350x150"/> Lorem expetendis .</p>
</div>

js:

$("#content img").on("click", function () {
    $(this).addClass("resize_handler");
});

然后我想在 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;
    }
});

查看 jsfiddle .

但这也无济于事，因为当我尝试拖动时，图像被选中了。单击图像的纵横比时如何使图像可调整大小？非常感谢您的帮助和指导。谢谢。

Answer 1

这是 fiddle :http://jsfiddle.net/jmyem32r/4/ .

你应该做你的增强，现在它看起来真的很难看，但是主要原理已经显示出来了。要实现可拖动行为，您应该使用一个 boolean 切换器，该切换器通过图像 mousedown 事件和文档 mouseup 进行切换。您还应该通过调用 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');            
    }             
});

});