У меня на странице есть элементы drag and drop, которые сохраняют свое положение в пространстве. Теперь я хочу, чтобы они сохраняли размеры при растягивании в ширину и высоту.
Использую JQuery UI.
1 попытка была такая (сохранять размеры блока после изменения и добавлять в стили элемента)
$( ".resizable_content" ).resizable({
handles: "se",
stop: function(evet, ui) {
let resElem = document.getElementById(this.id);
var w = ui.size.width;
var h = ui.size.height;
console.log(w, h);
resElem.style.height = h;
resElem.style.width = w;
},
});
Не сработало, не знаю почему.
2 вариант: сохранять размеры в localStorage:
var sHeight = localStorage.height || "{}",
sWidth = localStorage.width || "{}",
height = JSON.parse(sHeight),
width = JSON.parse(sWidth);
$.each(height, function (id, height) {
$("#" + id).css(height)
})
$.each(width, function (id, width) {
$("#" + id).css(width)
})
$(".resizable_content" ).resizable({
handles: "se",
stop: function (event, ui) {
height[this.id] = ui.size.height
width[this.id] = ui.size.width
localStorage.height = JSON.stringify(height)
localStorage.width = JSON.stringify(width)
}
});
Тут мне начала прилетать ошибка TypeError: a.replace it not a function, которая, как оказалось, вылетает из-за $.each().