喜歡的東西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" />