Где ошибка в применении изменяемого по размеру виджета?

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

var sizes = JSON.parse(localStorage.sizes || "{}");
$(function (){
    var d = $("[id=draggable]").attr("id", function (i) {
        return "draggable" + i
    });
    $.each(sizes, function (id, pos) {
        $("#" + id).css(pos)
    })
    d.resizable({
        containment: ".main-container",
        stop: function (event, ui) {
            sizes[this.id] = ui.size
            localStorage.sizes = JSON.stringify(sizes)
        }
    })
});

then in html:

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
    
<script src="{% static 'notes/resize.js' %}"></script>
...

<div id="draggable" class="ui-widget-content draggable resizable">
...

Тот же код прекрасно работает с draggable (позиции вместо размеров и id=draggable вместо class=resizable). Он даже не доступен в подсказках PyCharm с виджетом resizable.

Что случилось?

Вернуться на верх