jquery - Dragging div to a certain angle around fixed point -

i have hand want drag angle bottom(elbow) fixed , when image released should rotate original position making "throwing dart effect".

i taking of answers how make object rotate drag, how rotate point around origin use sin or cos?

but want make dragging allowed upto angle.

the div supposed dragged "right forearm" check fiddle https://jsfiddle.net/jvw2q476/

body {    min-height: 100%;    min-width: 100%;  }    .main {    height: 500px;    width: 800px;    background-color: #31b0d5;    border-radius: 20px;    margin: 50px auto;    border-radius: 5px;    -webkit-transform: perspective(500px) rotatex(10deg) rotatey(10deg) rotatez(0deg);    -moz-transform: perspective(500px) rotatex(10deg) rotatey(10deg) rotatez(0deg);    -o-transform: perspective(500px) rotatex(10deg) rotatey(10deg) rotatez(0deg);    position: relative;  }    .dart-board {    height: 100px;    width: 100px;    border-radius: 50px;    background-color: #a90d0d;    position: absolute;    bottom: 0px;    left: -50px;    transform: scale(1.0) scalez(1.0) rotatex(49deg) rotatey(70deg);    transform-origin: 50% 50%;    perspective: 360;    perspective-origin: 50% 50%;  }    .circle1 {    height: 80px;    width: 80px;    border-radius: 40px;    background-color: #0e5214;    position: absolute;    margin: auto;    top: 10px;    left: 10px;  }    .circle2 {    height: 60px;    width: 60px;    border-radius: 30px;    background-color: #a90d0d;    position: absolute;    margin: auto;    top: 10px;    left: 10px;  }    .circle3 {    height: 40px;    width: 40px;    border-radius: 20px;    background-color: #0e5214;    position: absolute;    margin: auto;    top: 10px;    left: 10px;  }    .circle4 {    height: 20px;    width: 20px;    border-radius: 10px;    background-color: #a90d0d;    position: absolute;    margin: auto;    top: 10px;    left: 10px;  }    .me-wrapper {    z-index: 6;    position: absolute;    bottom: 0;    right: 0;    transform: scale(0.4) rotatey(180deg) rotatex(10deg);  }    .me,  .me div {    background-repeat: no-repeat;    position: absolute;  }    .me {    bottom: 274px;    right: 0;  }    .torso {    height: 274px;    width: 86px;    background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");  }    .arm {    left: 12px;    -webkit-transform-origin: 20px 10px;    -moz-transform-origin: 20px 10px;    -o-transform-origin: 20px 10px;  }    .kite {    width: 395px;    height: 424px;    top: -115px;    left: 0px;    background-image: url("../img/kite.png");    -webkit-transform: rotate(45deg) scale(0.6);    -moz-transform: rotate(45deg) scale(0.6);    -o-transform: rotate(45deg) scale(0.6);  }    .right.bicep {    width: 51px;    height: 124px;    background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");  }    .left.bicep {    width: 52px;    height: 126px;    background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");  }    .left.forearm {    width: 37px;    height: 124px;  }    .right.forearm {    width: 36px;    height: 121px;    background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    animation: arm 2s linear infinite;    transform-origin: center 0px;  }    .dart {    height: 100%;    width: 100%;    top: 80px;    left: -20px;  }    .dart img {    transform: rotate(0deg);  }    .right.arm {    top: 93px;    -webkit-transform: rotate(-76deg);    -moz-transform: rotate(-76deg);    -o-transform: rotate(-76deg);  }    .left.arm {    top: 87px;  }    .forearm {    top: 108px;    left: 14px;    -webkit-transform-origin: 3px 7px;    -moz-transform-origin: 3px 7px;    -o-transform-origin: 3px 7px;  }    div.right.arm {    z-index: 1;  }    div.right.arm>div.bicep>div.forearm>div.dart img {    z-index: -1;  }    div.left.arm {    z-index: -3;  }    div.arm>div.bicep>div.forearm {    z-index: -1;  }

<div class="main">    <div class="board">      <div class="dart-board">        <div class="circle1">          <div class="circle2">            <div class="circle3">              <div class="circle4">                <div class="circle5"></div>              </div>            </div>          </div>        </div>      </div>    </div>    <div class="me-wrapper">      <div class='me'>        <div class="torso">          <div class="left arm">            <div class="left bicep">              <div class="left forearm"></div>            </div>          </div>          <div class="right arm">            <div class="right bicep">              <div class="right forearm">                <div class="dart">                  <img src="img/dart.png" alt="" width="100" height="50" />                </div>              </div>            </div>          </div>        </div>      </div>    </div>  </div>