类似jQuery'；s.可调整大小，但不带div'；里面是什么

这只是一个快速探索，看看这在技术上是否可行

我想在浏览器中（也在contentEditable区域内）启用图像的大小调整。Firefox和IE已经允许通过其内置的句柄来实现这一点，而且运行良好。不过，我想为Safari实现一些东西，因为它在本机上不支持这个功能

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

如果可能的话，我假设（希望）可能已经完成了，但到目前为止我的搜索还没有找到任何结果

---

渴望听到任何想法：）

也许这是一个开始。它只是用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" />

img{
宽度：400px；
高度：自动；
位置：相对位置；
}
var-positionX；
var startWidth；
var image=document.getElementById（'image'）；
document.onmousedown=函数（e）{
如果（！e）e=window.event；
位置x=（e.clientX）；
startWidth=image.width；
document.onmousemove=函数（e）{
如果（！e）e=window.event；
image.style.width=（startWidth+（e.clientX-positionX））+'px'；
}
}
document.onmouseup=函数（）{
document.onmousemove=null；
位置x=null；
startWidth=null；
}

这也许是一些事情的开始。它只是用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" />

img{
宽度：400px；
高度：自动；
位置：相对位置；
}
var-positionX；
var startWidth；
var image=document.getElementById（'image'）；
document.onmousedown=函数（e）{
如果（！e）e=window.event；
位置x=（e.clientX）；
startWidth=image.width；
document.onmousemove=函数（e）{
如果（！e）e=window.event；
image.style.width=（startWidth+（e.clientX-positionX））+'px'；
}
}
document.onmouseup=函数（）{
document.onmousemove=null；
位置x=null；
startWidth=null；
}

谢谢Patrick，我将在周一试一试，看看我能达到什么目的：）它工作得很好（当然是一个例子）。我将在选中图像时向其添加CSS轮廓，并更改脚本，使其接受轮廓上的拖动以调整图像大小。：）谢谢Patrick，我将在周一试一试，看看我能达到什么目的：）它工作得很好（当然是一个例子）。我将在选中图像时向其添加CSS轮廓，并更改脚本，使其接受轮廓上的拖动以调整图像大小。：）