title: How to make a element follow another element when dragging with jquery?
body: <p>I need make a element follow another element when dragging, but with delay in the animation, is similar to "Chat heads of facebook's messenger", you know, the bubbles on Android.</p>
  
  <p>This is my jQuery plugin:</p>
  
  <pre><code>// Draggable plugin
  (function($) {
  $.fn.drag = function(options) {
      options = $.extend({
          handle: null,
          cursor: 'move',
          draggingClass: 'dragging',
          heads: null
      }, options);
  
      var $handle = this,
          $drag = this;
  
      if( options.handle ) {
          $handle = $(options.handle);
      }
  
      $handle
          .css('cursor', options.cursor)
          .on("mousedown", function(e) {
              var x = $drag.offset().left - e.pageX,
                  y = $drag.offset().top - e.pageY,
                  z = $drag.css('z-index');
  
              $drag.css('z-index', 100000);
  
              $(document.documentElement)
                  .on('mousemove.drag', function(e) {
                      var chats = $($(options.heads).get().reverse());
  
                      chats.each(function(i) {
                          $(chats[i]).css({ left: $drag.position().left - (10*i)});
                          $(chats[i]).css({top: $drag.position().top});
                      });
  
                      $drag.offset({
                          left: x + e.pageX,
                          top: y + e.pageY
                      });
                  })
                  .one('mouseup', function() {
                      $(this).off('mousemove.drag');
                      $drag.css('z-index', z);
  
                      var window_width = $(window).width();
                      var window_height = $(window).height();
                      var head_wpostion = $(options.heads).position().left;
                      var head_hposition = $(options.heads).position().top;
  
                      if( head_wpostion &gt; (window_width / 2) )
                      {
                        $(options.heads).animate({left: (window_width-40)+"px"}, 300 );
                        $(options.heads).animate({left: (window_width-50)+"px"}, 300 );
                      }
                      else
                      {
                        $(options.heads).animate({left: "-15px"}, 300 );
                        $(options.heads).animate({left: "-5px"}, 300 );
                      }
  
                      if( head_hposition &gt; (window_height - 50) )
                      {
                        $(options.heads).animate({top: (window_height-75)+"px"}, 200 );
                        $(options.heads).animate({top: (window_height-65)+"px"}, 200 );
                      }
  
                      if( head_hposition &lt; 0 )
                      {
                        $(options.heads).animate({top: "15px"}, 150 );
                        $(options.heads).animate({top: "5px"}, 150 );
                      }
                  });
  
              // disable selection
              e.preventDefault();
          });
  };
  })(jQuery);
  </code></pre>