Js_color_ui

by DOK_UA

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Change color</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  </head>

  <body>


    <div id="background">


      <svg width="300" height="300" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb">

        <defs>
          <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:gray;stop-opacity:1" />
            <stop offset="50%" style="stop-color:black;stop-opacity:1" />
            <stop offset="100%" style="stop-color:gray;stop-opacity:1" />
          </linearGradient>

          <filter id="dropshadow" x="-50%" y="-50%" width="300%" height="300%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
            <feOffset dx="0" dy="0" result="offsetblur" />
            <feFlood flood-color="#101010" />
            <feComposite in2="offsetblur" operator="in" />
            <feMerge>
              <feMergeNode />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>

        </defs>


        <path class="mix-colors" id="mix-1" d="m49.8 1.9482-2.4398 9.1049a29.719 29.719 0 0 0-1.5866-0.38428 29.719 29.719 0 0 1 16.244 9.6434l4.9207-4.2697 0.37697-3.9821c-5.0834-5.0834-10.571-8.2516-17.515-10.112z" style="fill:#fb9902" />
        <path class="mix-colors" id="mix-2" d="m67.315 12.06-6.7021 6.7021a29.719 29.719 0 0 1 7.6206 13.276l9.1938-2.4636c-1.8606-6.944-5.0289-12.431-10.112-17.515z" style="fill:#fd5308" />
        <path class="mix-colors" id="mix-3" d="m77.427 29.575-9.1938 2.4636a29.719 29.719 0 0...

CSS

body{
  background-color:gray;
}

.static {
        cursor: not-allowed;
      }
.draggable {
        cursor: grab;
      }
      
.mix-colors{
        cursor: pointer;
      }

JavaScript

$( function() {
    $( "#joy" ).draggable({
    revert: "invalid",
    revertDuration: 20
    });
  } );