Quelque chose comme jQuery's .resizable mais sans l'intérieur de div

Question

c'est juste une sonde rapide pour voir si cela est techniquement possible.

Je souhaite activer le redimensionnement d'une image dans le navigateur (également dans une zone contentEditable). Firefox et IE permettent déjà cela avec leurs poignées intégrées et cela fonctionne bien. Je veux cependant implémenter quelque chose pour Safari parce qu'il ne supporte pas cela nativement.

Je me suis essayé à la méthode redimensionnable de jQuery et cela fait du très bon travail, mais cela dépend de l'insertion d'un tas de div avec l'image et l'emballage dans un grand div. Ce serait normalement bien si nous n'étions pas concernés par le code généré dans la zone contentEditable, mais nous le sommes parce qu'il va être sauvegardé sur le serveur. Je pourrais enlever ces trucs supplémentaires sur save, mais je pensais, est-il techniquement possible de créer un script de redimensionnement pour les images qui ne compte pas sur l'ajout de divs supplémentaires? Même si nous décidons de ne pas utiliser de poignées pour le moment, et que nous nous concentrons sur la détection d'un utilisateur proche du bord de l'image, changez le curseur de la souris en un redimensionnement et détectez les clics et les glissements dans les 5px. image, est-ce possible?

Si c'est possible, je suppose (en espérant) que c'est peut-être déjà fait, mais ma recherche n'a rien trouvé jusqu'à présent.

Soucieux d'entendre toutes les idées :)

Answer 1

est ici le début de quelque chose peut-être. C'est juste en javascript, mais vous pouvez facilement l'apporter à jQuery.

NOTE S'IL VOUS PLAÎT:

Le onmousedown et onmouseup serait normalement sur l'image au lieu du document, mais étant donné que je n'ai aucune sorte de poignée, vous finissez juste en faisant glisser l'image elle-même (en Safari de toute façon).

Ainsi, en ce moment, vous devez cliquer en dehors de l'image pour la redimensionner.

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