Ось Jquery Drag'n'Drop с вращением

Question

Мне нужно создать систему drag'n'drop для контейнера поворота, но когда я пытаюсь переместить "перетаскиваемый объект", этот перетаскиваемый элемент перемещается на другую ось (я думаю, что это вращение).

Я хочу, чтобы перетаскиваемый элемент следовал по той же оси, что и курсор, на самом деле перетаскиваемый элемент перемещался не так, как курсор.

Мой код:

$(function () {

      $(document).ready(function () {
          $("#box").css({
              WebkitTransform: 'rotate(-45deg)',
                  '-moz-transform': 'rotate(-45deg)'
          });
      });

      $(".draggable").draggable();

      $(".droppable").droppable({
          drop: function (event, ui) {
              $(this)
                  .addClass("ui-state-highlight")
                  .find(".p")
                  .html("Dropped!");
          }
      });
  });

Я сделал это, например: https://jsfiddle.net/0shojerz/1/

Я также попробовал это, но я не могу бросить клон:

$(".draggable").draggable({
            appendTo: 'body',
            helper: 'clone',
});

Большое спасибо за помощь!