Making Html Element Draggable With Jquery Not Working

$('#note').draggable({
  handle: "#headeR"
});

.NoteSection {
  font-family: 'Combo', cursive;
  background-color: #E2F1FF;
  height: 50px;
  width: 295px;
  color: black;
  font-size: 25px;
  outline: none;
  box-shadow: 4px 4px 15px 2px #AFC4D7;
  opacity: 0.9;
  position: relative;
  left: 250px;
}

.Container {
  width: 90%;
  height: 800px;
  margin-right: auto;
  margin-left: auto;
  background-color: #E3E5E7;
  position: absolute;
  top: 15%;
  left: 5%;
  box-shadow: 1px 1px 7px 1px #F0EFEF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="Container">
  <div class="NoteSection" id="note">
    <div id="headeR">
      <button id="color#1" class="BtnColor1" onclick="greennote()"></button>
      <button id="color#1" class="BtnColor2" onclick="bluecolor()"></button>
      <button id="color#1" class="BtnColor3" onclick="redcolor()"></button>
      <button id="color#1" class="BtnColor4" onclick="purplecolor()"></button>
      <button class="BtnColor5" onclick="deleteR()">
        <span class="black"></span>
        <span class="material-symbols-outlined">Delete</span>
      </button>
    </div>
    <div class="textspot" id="NOTEE">
      <textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
    </div>
  </div>
</div>