How do i drag multiple objects at once using jQuery?

Question

I am trying to drag multiple selected objects at the same time. I reviewed this link to assist me on how to accomplish this. I have not been able to get the full functionality of the dragging of multiple selected objects. Specifically, when more than one object is selected, i seem unable to determine the coordinates of the items being dragged. The items always have a 0,0 coordinate. This is my fiddle

Can somebody please review my code and let me know what i missed?

$(document).ready(function() {
$('#textbox, #textbox1').draggable(draggableOptions);
});


    var selectedObjs;
    var draggableOptions = {
    start: function (event, ui) {
        //get all selected...
        selectedObjs = $('div.selected').filter('[id!=' + $(this).attr('id') + ']');

    },
    drag: function (event, ui) {
        var currentLoc = $(this).position();
        var orig = $(this).data('orig');

        if (!orig) {
            orig = ui.originalPosition;
        }

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

        moveSelected(offsetLeft, offsetTop, selectedObjs);
        $(this).data('orig', currentLoc);
    }
   };


   function moveSelected(ol, ot, selectedObjs) {
    console.log(selectedObjs.length);
    selectedObjs.each(function () {
        $this = $(this);
        var pos = $this.position();

        var l = $this.context.clientLeft;
        var t = $this.context.clientTop;

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

Answer 1

I found the issue, i had to change the calc for left and top Please see the code below,

 var pos = $this.position();

 var l = pos.left;
 var t = pos.top;