喜欢的东西jQuery的.resizable但没有div的内部

Question

这仅仅是一个快速探头，看是否这在技术上是可行的。

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

我已经与jQuery的可调整大小的方法一去和它做了很好的工作，但是它依赖于与图像和包裹一起插入一堆的div的是，在一个大的DIV。如果我们不关心在contentEditable区域生成的代码，这通常会很好，但我们是因为它将被保存回服务器。我可以保存这些额外的东西，但我在想，在技术上可以创建一个不依赖于添加额外div的图像大小调整脚本？即使我们决定去无柄现在，只是专心当用户靠近图像的边缘检测时，鼠标光标变为调整一个，并检测点击和拖动在5像素的周围的边缘图像，这可能吗？

如果有可能，我假设（希望），或许它已经完成，但我的搜索没有变成任何东西为止。

热衷于听到的任何想法:)

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" />