Quelque chose comme jQuery est .resizable mais sans l'intérieur du div

Question

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

Je suis désireux de permettre le redimensionnement d'une image dans le navigateur (également dans une zone contentEditable). Firefox et IE permettent déjà que cela soit fait avec leurs poignées et il fonctionne encastrables bien. Je suis désireux de mettre en œuvre quelque chose pour Safari mais parce qu'il ne supporte pas nativement.

J'ai eu un aller avec la méthode redimensionnable jQuery et il fait un très bon travail, mais il repose sur l'insertion d'un tas de div ainsi que de l'image et l'emballage que dans une grande div. Cela devrait normalement être bien si nous étions pas concernés par le code généré dans la zone contentEditable, mais nous sommes parce que ça va être sauvé sur le serveur. Je pourrais déshabille ce genre de choses supplémentaires sur sauver, mais je pensais, est-il techniquement possible de créer un script de redimensionnement des images qui ne reposent pas sur l'ajout div EXTRAS? Même si nous décidons d'aller sans poignées pour l'instant, et se concentrer uniquement sur la détection lorsqu'un utilisateur est proche du bord de l'image, changer le curseur de la souris à un redimensionnement un, et détecter les clics et fait glisser dans les 5px ARRIVE bord du l'image, est-ce possible?

S'il est possible, je suppose (en espérant) que peut-être il a déjà été fait, mais ma recherche n'a pas tourné quoi que ce soit à ce jour.

désireux d'entendre des idées:)

Answer 1

Voici le début de quelque chose peut-être. Il est juste en javascript, mais vous pouvez facilement l'amener vers 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 venez de finir par glisser l'image elle-même (dans Safari de toute façon).

Ainsi, la façon dont il est en ce moment, vous devez cliquer en dehors de l'image afin de le 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" />