使宽度不相对于父级

Question

我实现了 spectrum color picker，我想将颜色选择器添加到可拖动元素。（我通过JQuery UI实现了可拖动元素。）这样，当你拖动可拖动元素时，颜色选择器会随之移动。

我能够在颜色选择器设置中使用 appendTo: "parent" 实现它。现在我有另一个问题。颜色选择器有两个主要的东西。 1 - 它有一个预定义的调色板。 2 - 它有一个颜色选择器，您可以在其中 select 自定义颜色。

假设父元素是 200px（可拖动元素）。由于颜色选择器现在是父元素的子元素，因此颜色选择器将尝试根据父元素调整其宽度。结果是，颜色选择器位于预定义的调色板下方。这不是默认外观。

如何让颜色选择器容器拥有自己的宽度，而不依赖于父宽度？

JSFiddle

（将#wrapper的宽度设为500px即可看到默认外观。）

$("#wrapper").draggable();


$("#colorPicker").spectrum({
  appendTo: "parent",
  showPalette: true,
});

#wrapper {
  width: 200px; /* Try Making this to 500px to see the default appearance.*/
  height: 100px;
  border: 1px solid grey;
  text-align: center;
}
#colorPicker {
  background-color: pink;
  margin-top: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<link href="http://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet" />



<div id="wrapper">Drag Me
  <div id="colorPicker">
    Click Me
  </div>
</div>

Answer 1

查看频谱文档。

有一个 "appendTo" 属性可以用来更改颜色选择器相对于哪个元素。

$("#droppable").spectrum({
  appendTo: "body",
  showPalette: true,
  showSelectionPalette: true,
});

这将创建您可能正在寻找的并排视图。

由于您希望颜色选择器与包装器一起拖动并相对定位，请在绑定到光谱处理程序的元素上尝试以下样式规则：

<div id="wrapper" style="overflow: visible;"> Drag Me
  <div style="position: relative; width: 500px;">
      <div id="colorPicker" style="width:200px;">
          Click Me
      </div>
  </div>
</div>

并保持你的 JS 原样。

使宽度不相对于父级

Make width not relative to parent

javascript

css

jquery

jquery-ui

spectrumjs

JSFiddle