jQuery Select and Drag elements with relative and absolute position problem

jQuery Select and Drag elements with relative and absolute position problem

Hi,

I had askedthis question on another forum but unfortunately I was unable to find a fix.

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

You can see the code and demo at http://jsbin.com/azeli/2 


  
    
   
  1. $(function() {
    2. 
   
  2.   var selected = $([]), offset = {top:0, left:0};
    3. 
   
  3.   $("#selectable1").selectable();
    4. 
   
  4.     $("#selectable1 span.drag").draggable({
    5. 
   
  5.         start: function(ev, ui) {
    6. 
   
  6.         selected = $(".ui-selected").each(function() {
    7. 
   
  7.         var el = $(this);
    8. 
   
  8.         el.data("offset", el.offset());
    9. 
   
  9.         });
    10. 
   
  10.         offset = $(this).offset();
    11. 
   
  11.       },
    12. 
   
  12.       drag: function(ev, ui) {
    13. 
   
  13.         var dt = ui.position.to- offset.top, dl = ui.position.left - offset.left;
    14. 
   
  14.         selected.not(this).each(function() {
    15. 
   
  15.           var el = $(this), off = el.data("offset");
    16. 
   
  16.           el.css({top: off.to+ dt, left: off.left + dl});
    17. 
   
  17.           });
    18. 
   
  18.       },  
    19. 
   
  19.   });
    20. 
   
  20.   });
    21. 
  
Please let me know if this can be fixed.
Thank you.