title: TypeError: $source.offset is not a function
body: <p>I have a tree structure where the elements can be dragged and dropped into another element. My objective is when a element or node from a tree is dragged and dropped to the external element I want a line to be drawn from the element of the tree to the external location.</p>
  
  <p>I have the code separate for dragging and dropping. I tried to integrate the code into my tree structure and getting this error. I did see similar errors but could not get an exact idea about what exactly the error is. Here is the code that is giving me the error. </p>
  
  <pre><code>end: function(item, hover, placeholder, helper) {
      if (placeholder.parent().length) {
      var tree = $('#tree1').aciTree('api');
      if (tree.isItem(item)) {
          var id = tree.getId(item);
          var label = tree.getLabel(item);
          if (this._instance.jQuery.hasClass('any')) {
              this._instance.jQuery.find('li:not(.aciSortablePlaceholder)').remove();
          }
          var item = $('&lt;li id="item-' + id + '"&gt;' + label + '&lt;/li&gt;');
          var sourceId = id;
          var destinationId = sourceId;
          drawLine(sourceId, destinationId);
          //This is how the function is called
          placeholder.after(item).detach();
       } 
          else {
              placeholder.detach();
       }
  }
  helper.detach();
  }});
  
  function drawLine(eTarget, eSource) {
      setTimeout(function () {
      var $source = eSource;
      var $target = eTarget;
      var originX = $source.offset().left + $source.width() + 20 + 4;
      // In the $source.offset() I am getting the error.
      var originY = $source.offset().top + (($source.height() + 20 + 4) / 2);
  
      var endingX = $target.offset().left;
      var endingY = $target.offset().top + (($target.height() + 20 + 4) / 2);
  
      var space = 20;
      var color = "black";
  
      var a = "M" + originX + " " + originY + " L" + (originX + space) + " " + originY; // beginning
      var b = "M" + (originX + space) + " " + originY + " L" + (endingX - space) + " " + endingY; // diagonal line
      var c = "M" + (endingX - space) + " " + endingY + " L" + endingX + " " + endingY; // ending
      var all = a + " " + b + " " + c;
  
      console.log("New Line ----------------------------");
      console.log("originX: " + originX + " | originY: " + originY + " | endingX: " + endingX + " | endingY: " + endingY + " | space: " + space + " | color: " + color );            
      console.log(all); 
  
      myLines[myLines.length] = svg
      .path(all)
      .attr({
           "stroke": color,
           "stroke-width": 1,
           "stroke-dasharray": "-"
       });
   }, 1000);
  </code></pre>
  
  <p>PS: I am using firefox. The eTarget and eSource and getting the values as supplied.</p>