使宽度不相对于父本

Question

我实现了光谱选色器，并希望将颜色选择器添加到可拖放元素中。(我通过JQuery UI实现了可拖放元素。)这样，当您拖动可拖动的元素时，颜色选择器将与其一起进行。

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

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

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

​

JSFiddle

(将#wrapper的宽度设置为500 to，以查看默认外观。)

​

​

$("#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>

保持原样。