可选-选择后，元素更改外观

Question

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

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

我通过以下方式更改所选元素的颜色：

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

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

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

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

原始外观：

选择后-更宽：

取消选择后-黄色，但较宽：

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

整个示例是here

Answer 1

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

编辑脚本的这一部分：

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

=>

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

Answer 2

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

def explode_str(df, col, sep):
    s = df[col]
    i = np.arange(len(s)).repeat(s.str.count(sep) + 1)
    return df.iloc[i].assign(**{col: sep.join(s).split(sep)})

那样，可调整大小元素的句柄不会改变。