jQuery Select and Drag elements with relative and absolute position

Question

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.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.

Answer 1

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 thru the array of saved elements, restores its 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});