Selectable - 选择后，元素改变其外观答案

【问题标题】：Selectable - after selection, element changes it's apperanceSelectable - 选择后，元素改变其外观
【发布时间】：2019-09-29 10:41:57
【问题描述】：

我有一个带有可拖动 - 可克隆元素的小例子。必须先将每个元素从左上角拖到可放置区域（下面的 div）。

我想用蓝色标记所有选定的元素。当它们不再被选中时，我想将颜色恢复为黄色。

我改变所选元素的颜色：

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

对于所有未选中的元素，代码相同，只是颜色不同：

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

基本上一切正常 - 唯一的问题是元素在选择后更改 - 取消选择。

原貌：

选择后 - 更宽：

取消选择后 - 它是黄色的，但更宽：

为什么它越来越宽？我唯一改变的是背景颜色。

整个例子是here

【问题讨论】：

【解决方案1】：

不是你的 div 变宽了，而是你的可调整大小的添加句柄使它看起来更宽。当您从脚本中删除所有可调整大小的功能时，您不会看到这种效果。

编辑脚本的这一部分：

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

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

【讨论】：

【解决方案2】：

解决方案是仅在父级上设置背景颜色。

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

这样，可调整大小元素的句柄并没有改变。

【讨论】：