jQuery перетаскиваемый и вращаемый конфликт с положением

Question

Я пытаюсь вращать и перемещать более одного объекта за раз, используя jQuery UI, Rotatable, Draggable, Resizable. Но rotatable конфликтует с позициями перетаскиваемых объектов.

Есть ли способ запустить это на нескольких элементах с правильными позициями?

Вот мой код и jsfiddle example HTML:

<div class='drag a' id='a'>A</div>
<div class='drag b' id='b'>B</div>
<div class='drag c' id='c'>C</div>
<div class='drag d' id='d'>D</div>

JS:

var selectedObjs;
var draggableOptions = {
start: function(event, ui) {
    //get all selected...
    if (ui.helper.hasClass('selected')) selectedObjs = $('div.selected');
    else {
        selectedObjs = $(ui.helper);
        $('div.selected').removeClass('selected')
    }
},
drag: function(event, ui) {
    var currentLoc = $(this).position();
    var prevLoc = $(this).data('prevLoc');
    if (!prevLoc) {
        prevLoc = ui.originalPosition;
    }

    var offsetLeft = currentLoc.left-prevLoc.left;
    var offsetTop = currentLoc.top-prevLoc.top;

    moveSelected(offsetLeft, offsetTop);
    selectedObjs.each(function () {
           $(this).removeData('prevLoc');
        });
    $(this).data('prevLoc', currentLoc);
}
};

$('.drag').rotatable().resizable().draggable(draggableOptions).click(function() 
 {$(this).toggleClass('selected')});


function moveSelected(ol, ot){
console.log("moving to: " + ol + ":" + ot);
selectedObjs.each(function(){
    $this =$(this);
    var p = $this.position();
    var l = p.left;
    var t = p.top;
    console.log({id: $this.attr('id'), l: l, t: t});


    $this.css('left', l+ol);
    $this.css('top', t+ot);
})
}