Jquery UI draggable i rotate

Mam następujący problem: mam akapit z tekstem, który jest obrócony o 90 stopni i podpięte do niego jquery UI draggable, aby można go było przesuwać. Problem jest w tym, że jak klikam aby element przesunąć to przeskakuje, oraz nie da się go dociągnąć do lewej i prawej krawędzi rodzica.

Tak działają transformacje - obiekt jest rysowany w określonym położeniu, ale właściwości pozostają takie jak sprzed transformacji. Być może da się to ogarnąć przez getBoundingClientRect, ale to też musiałoby być ogarnięte przez bibliotekę do przesuwania. Spróbuj zastąpić jQ UI Draggable czymś innym.

łap , wystarczy trochę zmodyfikować ;-)
HTML

<p>Przesuwaj element</p>
<div style="background: orange; width: 60px; height: 20px">
</div>

JS

 var lastX; //zapamietuje ostatnia pozycję
  var rect = document.querySelector("div");
  rect.addEventListener("mousedown", function(event) {
    if (event.which == 1) {
      lastX = event.pageX;
      addEventListener("mousemove", moved);
      event.preventDefault(); 
    }
  });

  function buttonPressed(event) {
    if (event.buttons == null)
      return event.which != 0;
    else
      return event.buttons != 0;
  }
  function moved(event) {
    if (!buttonPressed(event)) {
      removeEventListener("mousemove", moved);
    } else {
      var dist = event.pageX - lastX;
      var newWidth = Math.max(10, rect.offsetWidth + dist);
      rect.style.width = newWidth + "px";
      lastX = event.pageX;
    }
  }