Question

这只是一个快速调查，看看这在技术上是否可行。

我想在浏览器中调整图像大小（也在contentEditable区域内）。 Firefox和IE已经允许使用它们内置的句柄完成它并且它工作正常。我想为Safari实现一些东西，因为它本身不支持这个。

我已经使用了jQuery的可调整大小的方法并且它做得非常好，但是它依赖于插入一堆div和图像并将其包装在一个大的div中。如果我们不关心contentEditable区域中生成的代码，这通常会很好，但我们是因为它将被保存回服务器。我可以在保存时删除这些额外的东西，但我在想，技术上是否可以为不依赖于添加额外div的图像创建调整大小的脚本？即使我们现在决定不使用手柄，只是专注于检测用户何时接近图像边缘，将鼠标光标更改为调整大小，并检测5px周围的点击和拖动。这是可能的吗？

如果有可能的话，我假设（希望）也许已经完成了，但到目前为止，我的搜索还没有发现。

热衷于听取任何想法：）

Answer 1

这可能是某些事情的开始。它只是在javascript中，但你可以很容易地将它带到jQuery。

请注意：

onmousedown和onmouseup通常位于图片上而不是文档上，但由于我没有任何处理方式，您最终会拖动图片本身（无论如何都在Safari中））。

所以现在的方式，您需要点击图像外部以调整图像大小。

img {
    width: 400px;
    height: auto;
    position: relative;
}

var positionX;
var startWidth;
var image = document.getElementById('image');
document.onmousedown = function(e) {
    if(!e) e = window.event;
    positionX = (e.clientX);
    startWidth = image.width;
    document.onmousemove = function(e) {
        if(!e) e = window.event;
        image.style.width = (startWidth + (e.clientX - positionX)) + 'px';
    }
}
document.onmouseup = function() {
    document.onmousemove = null;
    positionX = null;
    startWidth = null;
}


<img id="image" src="http://mydomain.com/myimage.jpg" />

有点像jQuery的.resizable但没有div的内部

1 个答案: