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

这是小提琴：http://jsfiddle.net/jmyem32r/4/。

你应该做你的增强，现在它看起来很丑，但主要原则显示。要制作可拖动的行为，您应该使用切换为图片boolean事件的mousedown切换器和文档mouseup。此外，您应该通过调用mousedown方法取消默认event.preventDefault行为。

 $(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 UI的情况下在div中单击时使图像可调整大小

1 个答案: