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

Posted 2023-05-07

【中文标题】Selectable - 选择后，元素改变其外观

【英文标题】：Selectable - after selection, element changes it's apperance

【发布时间】：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');

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