Добрый день. Суть: создал небольшой скрипт по добавлению div с параметрами (цвет, размер) и свойствами перетаскивания, изменения размера.
Столкнулся с 2мя вопросами:
1. Когда меняю размер у div и отпускаю мышку метод функция stop у resizable выводит старые, предущие данные о ширине и высоте div. Как получить новые именно после изменения размера. Было бы здорово выводить их в процессе изменения размера, в реальном времени.
2. Когда к div применяю добавление или изменение текста (к примеру $("#id").text("текст")
, то текст добавляется к div, но у него пропадает возможность изменения размера. С чем связано?
Ниже код и видео для наглядности :
1.
// Создание блоков. count - количество блоков
count = 0;
$(".createblock").click(function(){
randomColor = '#' + (Math.random().toString(16) + '000000').substring(2,8).toUpperCase();
count++;
// Описание блока
$("<div/>",{
id: "block"+count,
// text: count,
class: "newblock ui-widget-content",
css: {
background: randomColor,
"z-index": count,
"width": "100px",
"height": "100px"
},
on: {
'click': function(e){
$(".inputParams").attr("placeholder", e.target.id); //запись id блока в поле input
let colorRgb = $(this).css("background-color");
let colorHex = rgb2hex(colorRgb); // Перевод цвета в формат #XXXXXX
$(".codeColor").attr("placeholder", colorHex); //запись кода цвета #XXXXXX блока в поле input
setColorWell(e.target.id);
$("#spinner").spinner("value", $(this).css("z-index"));
setWHPar($(this).css("width"), $(this).css("height"));
}
},
appendTo: ".container"
});
// Добавление к блоку свойств перетаскивания, изменения размера
$(function() {
$("#block"+count).draggable({cursor:"move", containment:"parent"});
$("#block"+count).resizable({
handles: "all",
animate: true,
ghost: true,
animateEasing: "swing",
stop: function(event, ui) {
// $("#block"+count).text('Итоговые размеры: '+ui.size.width+', '+ui.size.height);
alert (ui.size.width + " " + ui.size.height);
//setWHPar($(this).css("width"), $(this).css("height"));
}
});
});
callCountBlocks(); //Вывод количества блоков в input
setWHPar($("#block"+count).css("width"), $("#block"+count).css("height")); // Вывод W и H в поля input
});
Здесь много лишнего (прошу прощения), просто мало ли вопрос по .resizable({ stop:}) является следствием неверного кода в другом месте.
Второй вопрос у меня появляется, если раскомментировать первую строку ф-ии stop по выводу текста в div.
Ссылки на видео:
https://disk.yandex.ru/i/uEz_-NIhsEBxYw https://disk.yandex.ru/i/YfN55jMJ5b4Dew