jquery resizable() не работает (с примером)

Пожалуйста, посмотрите эту работу в процессе:

http://rawgit.com/jfix/cover-image-position/master/index.html

Моя цель - разрешить перетаскивание с рабочего стола на эту страницу, а затем перетаскивать изображение, а также изменять его размер. Вы должны быть в состоянии поместить изображение на страницу и перетащить его.

Однако, что не работает, так это изменение размера изображения. На рамке вокруг изображения нет указателя, и изменить его размер невозможно. Нет ошибок в консоли.

Соответствующий код здесь:

hdl.resizable({
    aspectRatio: true,
    autoHide: true,
    alsoResize: "#coverimage",
    handles: 'all',
    resize: function(event, ui) {
    cvr
        .css('left', ui.position.left)
        .css('top', ui.position.top);
    }
});

где hdl это краткая форма для $('#handler') в assets/script.js файл. Я должен отметить, что это было почти дословно скопировано из этого jsfiddle: http://jsfiddle.net/nL5ew/ где он работает нормально, очевидно.

Я не могу найти проблему с моим кодом. Спасибо за любые взгляды с орлиными глазами, которые вы можете иметь.

Источник

2 ответа

Решение

Проверив JSFiddle @RRR и сравнив его строку за строкой с моим кодом, я обнаружил, что не включил, как выясняется, один жизненно важный CSS-файл из набора JQuery UI. Это строка, которая отсутствовала:

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

Справедливости ради, правильное решение было предоставлено @RRR, к сожалению, не в полном ответе, а просто в комментарии.

Источник

Используйте этот синтаксис для лучшего результата:

 $(selector, context).resizable({option1: value1, option2: value2..... });
Источник
Другие вопросы по тегам