jQuery Select and Drag elements with relative and absolute position

I have a select and drag code that works well until in selection is added a position relative div.

Here is the code and you can see a working demo at http://jsbin.com/azeli/2 To see the problem just mouse select span 1, span 2 and the nested span 4

$(function() {

  var selected = $([]), offset = {top:0, left:0};
  $("#selectable1").selectable();

    $("#selectable1 span.drag").draggable({

        start: function(ev, ui) {

        selected = $(".ui-selected").each(function() {
        var el = $(this);
        el.data("offset", el.offset());

        });

        offset = $(this).offset();

      },

      drag: function(ev, ui) {

        var dt = ui.position.top - offset.top, dl = ui.position.left - offset.开发者_C百科left;

        selected.not(this).each(function() {
          var el = $(this), off = el.data("offset");
          el.css({top: off.top + dt, left: off.left + dl});
          });

      },  

  });
  });

Please let me know if this can be fixed. Thank you.

Make the position absolute for all elements within the selection, restore the original position when the selection changes.

outside the loop

var originalPositions = new Array();

inside the loop

// call the restorePositions() that goes through the array of 
// saved elements, restoring each position and remove the element from the array;
// if element in the loop has a position thats not relative, add to array
el.css({position: 'absolute', top: off.top + dt, left: off.left + dl});