使寬度不相對於父級

Question

我實現了光譜顏色選擇器 ，我想將顏色選擇器添加到可拖動元素中。 （我通過JQuery UI實現了draggable元素。）這樣，當您拖動可拖動元素時，顏色選擇器將隨之而來。

我能夠在顏色選擇器設置中使用appendTo: "parent"實現該功能。 現在我有另一個問題。 拾色器有2個主要功能。 1-它具有預定義的調色板。 2-它有一個顏色選擇器，您可以在其中選擇自定義顏色。

假設父元素為200px（可拖動元素）。 由於顏色選擇器現在是父元素的子代，因此顏色選擇器將嘗試根據父元素調整其寬度。 結果是，顏色選擇器位於預定義的調色板下方。 這不是默認外觀。

如何使顏色選擇器容器具有自己的寬度，而不依賴於父寬度？

JSFiddle

（將#wrapper的寬度#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>

並保持原樣。