Что-то вроде jQuery .resizable, но без div внутри - PullRequest
Новая
       41

Что-то вроде jQuery .resizable, но без div внутри

1 голос
/ 23 апреля 2010

это всего лишь быстрая проверка того, возможно ли это технически.

Я хочу включить изменение размера изображения в браузере (также в области contentEditable).Firefox и IE уже позволяют это делать с помощью встроенных дескрипторов, и это прекрасно работает.Однако я хочу реализовать что-то для Safari, потому что он не поддерживает это изначально.

Я попробовал метод изменяемого размера jQuery, и он делает очень хорошую работу, однако он полагается на вставку связкиDiv's вместе с изображением и оборачивая это в большой Div.Обычно это было бы хорошо, если бы нас не интересовал код, сгенерированный в области contentEditable, но мы делаем это потому, что он будет сохранен на сервере.Я мог бы удалить этот дополнительный материал при сохранении, но я подумал, технически возможно ли создать скрипт изменения размера для изображений, который не зависит от добавления дополнительных div-ов?Даже если мы решим пока обходиться без ручек и просто сконцентрироваться на обнаружении, когда пользователь находится близко к краю изображения, измените курсор мыши на курсор с изменяющимся размером и обнаружите щелчки и перетаскивания в 5 пикселей вокруг краяimage, возможно ли это?

Если это возможно, я предполагаю (надеюсь), что, возможно, это уже сделано, но мой поиск ничего не дал до сих пор.

Желаниеуслышать любые идеи:)

1 Ответ

1 голос
/ 23 апреля 2010

Вот начало чего-то, возможно. Это только в 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" />
...