Выбираемый - после выбора элемент меняет свой внешний вид

Question

У меня есть небольшой пример с перетаскиваемо-клонируемыми элементами. Каждый элемент должен быть перетащен первым из верхнего левого угла в область опускания (ниже).

Я хотел бы отметить все выделенные элементы синим цветом. Когда они больше не выбраны, я бы хотел вернуть цвет обратно к желтому.

Я меняю цвет выделенных элементов с помощью:

selected: function(event, ui){
      $(ui.selected).css('background-color', 'blue');
    },

и для всех невыбранных элементов это один и тот же код, только цвет отличается:

unselected: function(event, ui){      
  $(ui.unselected).css('background-color', 'yellow');
}

В принципе все работает нормально - единственная проблема в том, что элемент изменяется после выделения - отмена выбора.

Оригинальный внешний вид:

после выбора - шире:

после отмены выбора - желтый, но шире:

Почему становится шире? Единственное, что я изменяю, это цвет фона.

Весь пример здесь

Answer 1

Расширяется не ваш div, а добавленные маркеры вашего изменяемого размера, которые делают его более широким.Вы не увидите этого эффекта, когда удалите все функции изменяемого размера из вашего скрипта.

Отредактируйте эту часть вашего скрипта:

 function setResizable(el){
     el.resizable({
     });
 }

=>

function setResizable(el){
    el.resizable({
        autoHide: "true"
    });
}

Answer 2

Решением было установить цвет фона только на родительском.

 $(ui.selected).closest('.component').css('background-color', 'blue');

Таким образом, дескрипторы изменяемого размера элемента не изменились.