Plank Test With Drag

Very sloppy code that shows dragging with rotated parent.

HTML

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
  <div class="game_area">
    <div class="game_working">
      <div class="rotatableAra">
        <div class="leftplank"></div>
        <div class="rightPlank"></div>
        <div class="plank droppablePlank"></div>
        <div class="point"></div>
      </div>

    </div>

    <div class="draggableArea">
      <div  class="draggableweight" data-wgt="5" data-tp="15" data-left="0" style="width:30px;" >
        <img src="http://s3.postimg.org/xv5bllc3j/a12.png">
      </div>
      <div class="draggableweight" data-wgt="5" data-tp="15"data-left="40" style="width:30px;">
        <img src="http://s3.postimg.org/xv5bllc3j/a12.png">
      </div>
      <div class="draggableweight big" data-wgt="10" data-tp="0" data-left="80" style="width:45px;height:83px;">
        <img src="http://s3.postimg.org/aw8m2og3j/image.png" alt="">
      </div>
     
    </div>
    <div class="middleKnob"></div>
  </div>
  <div class="game_footer"></div>
</div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  background: #89C156;
}
.container {
  height: 550px;
  background: url(http://s3.postimg.org/8u84ofi4j/bg_sky.jpg) repeat-x;
}
.game_area {
    width: 768px;
    margin: auto;
    height: 80%;
    position: relative;
    /* border: 1px solid;
    */
}
.game_footer {
  height: 20%;
  background: #89C156;
}
.middleKnob {
  background: url("http://s3.postimg.org/yypfxjwqn/middle_knob.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
 bottom: 0;
    height: 127px;
    left: 27.3%;
    position: absolute;
    width: 150px;
}
.plank {
  background: url("http://s3.postimg.org/5yv1hke4j/plank.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 9px;
  overflow: hidden;
  position: absolute;
  width: 543px;
  z-index: 2;
  top: 100px;
}
.rotateleft {
  -webkit-transform: rotate(-19deg);
  -ms-transform: rotate(-19deg);
  -o-transform: rotate(-19deg);
  transform: rotate(-19deg);
  transition: all 2s ease;
}
.rotateRight {
  -webkit-transform: rotate(19deg);
  -ms-transform: rotate(19deg);
  -o-transform: rotate(19deg);
  transform: rotate(19deg);
  transition: all 2s ease;
}
.draggableweight {
  position: relative;
  float: left;
  margin-left: 10px;
  bottom: 0px;
  z-index: 1;
  height: 83px;
  width: 30px;
  overflow: hidden;
}
.draggableweight.dragging {
  position: absolute;
  float: none;
  margin-left: 0px;
  bottom: auto;
}
.draggableweight img {
  bottom: 0;
  position: absolute;
  width: 30px;
}
.draggableArea {
    float: left;
    left: 2%;
    position: relative;
    top: 81%;
}
.leftplank{
  height: 9px;
  left: 2px;
  top: 100px;
  position: absolute;
  width: 240px;
  z-index: 1;
}
.rightPlank{
  height: 9px;
  position: absolute;
  top: 100px;
  right: 2px;
  width: 240px;
  z-index: 1;
}
.nonRotatedArea,
.rotatableAra{
  height: 200px;
  position: absolute;
  width: 543px;
  top: -100px;
}
.nonRotatedArea {
  display: none;
}
.game_working{
  border: 1px solid transparent;
    display: block;
    float: left;
    height:...

JavaScript

$(document).ready(function() {
    // monkeyPatch_mouseStart()

    fixedTop = $('.draggableweight').offset().top;
    leftArray = {
        0: 0,
        1: 0,
        2: 0
    };
    rightArray = {
        0: 0,
        1: 0,
        2: 0
    };
    degrees = 0;
    var plankTop = $('.rightPlank').position().top;
    var rotateOffset = $('.rotatableAra').offset();
    var offsetCenter = $('.rotatableAra').width() / 2;
    var xCenter = rotateOffset.left + $('.rotatableAra').width() / 2;

    function degreesToRadians(degrees) {
        console.log(degrees * (Math.PI / 180))
        return degrees * (Math.PI / 180)
    }

    function findWight() {
        leftCount = 0;
        for (var key in leftArray) {
            leftCount += leftArray[key];
        }
        rightCount = 0;
        for (var key1 in rightArray) {
            rightCount += rightArray[key1];
        }
        if (leftCount > rightCount) {
            $('.rotatableAra').removeClass("rotateleft rotateRight");
            $('.rotatableAra').addClass("rotateleft");
            degrees = -19;
        } else if (leftCount < rightCount) {
            $('.rotatableAra').removeClass("rotateleft rotateRight");
            $('.rotatableAra').addClass("rotateRight");
            degrees = 19;
        } else {
            $('.rotatableAra').removeClass("rotateleft rotateRight");
            degrees = 0;
        }
    }
    $('.leftplank').droppable({
        greedy: true,
        tolerance: 'touch',
        drop: function(event, ui) {
            $textval = ui.draggable.data("wgt");
            $dragpos = ui.draggable.data("pos");
            ind = $('.draggableweight').index(ui.draggable);
            pos = Math.round(($('.leftplank').offset().left - ui.draggable.offset().left) / 30) + 8;
            if (pos > 8) {
                pos = 8;
            }
            var offset = ui.draggable.offset();
            var offsetPlank = $('.leftplank').offset();
            var rotateOffset =...