Sandbox

by heavyhorse

HTML

<link rel="stylesheet" href="http://bgrins.github.io/spectrum/spectrum.css">
<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<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>

CSS

#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;
}

JavaScript

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


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