javascript - How to make a element follow another element when dragging with jquery? -

javascript - How to make a element follow another element when dragging with jquery? -

i need create element follow element when dragging, delay in animation, similar "chat heads of facebook's messenger", know, bubbles on android.

this jquery plugin:

// 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 > (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 > (window_height - 50) ) { $(options.heads).animate({top: (window_height-75)+"px"}, 200 ); $(options.heads).animate({top: (window_height-65)+"px"}, 200 ); } if( head_hposition < 0 ) { $(options.heads).animate({top: "15px"}, 150 ); $(options.heads).animate({top: "5px"}, 150 ); } }); // disable selection e.preventdefault(); }); }; })(jquery);

the way can if position element want to dragged along relevant drag-able element.

javascript jquery html5 drag-and-drop draggable