title: jQuery draggable element changes position on drag start when position is absolute
body: <p>when I click on the item and start dragging it, it changes it's initial position on drag start. The elements have "left" and "top" properties in the style attribute. This happens when they have absolute position.</p>
  
  <p><a href="https://i.stack.imgur.com/jkJL9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jkJL9.jpg" alt="enter image description here"></a></p>
  
  <p>and the jquery: 
  it was initially this: <code>$('.tree li').draggable();</code></p>
  
  <p>I also tried this: </p>
  
  <pre><code>$('.tree li').draggable({
    containment: '.tree',
      snap: '.tree',
      start: function (event, ui) {
        if ($(event.target).is('.ui-draggable-dragging')) {
            var x = $(event.target).offset().left;
            var y = $(event.target).offset().top;
            $(this).css({
                'left': x,
                'top': y
            });
          }
        }
  });
  </code></pre>
  
  <p>the containers are relative, only the list items are absolute. When the itemst are listed, they have style attributes with positions set. When I click an item, at the very beginning it changes it''s position and start dragging from the changed position instead of dragging from the position when I click on it.</p>
  
  <p>Here is a fiddle:
  <a href="https://jsfiddle.net/oe2955m5/" rel="nofollow noreferrer">https://jsfiddle.net/oe2955m5/</a></p>