Перемещение ДИВ по щелчку

Question

Скажем, у меня есть этот макет:

<div class='layout_theme'> 
    <a class='icon'> 
    <img class='example_one'> 
</div> 

<div class=layout_theme> 
    <a class='icon'> 
    <img class='example_two'> 
</div> 

<div class='file_uploader'> 
    <sample code...> 
</div> 

Идея заключается в том, когда я нажимаю Img «example_one», то «.file_uploader» Див движется прямо под ним. Эта же идея применима, если бы у меня было 10 divs с классом «layout_theme». По сути, вы щелкаете img в этом div, и файл загружается прямо под ним.

Возможно ли это?

Answer 1

Вы можете сделать это следующим образом:

$(".layout_theme").click(function(){ 

    $(".file_uploader").animate({ 
     left: $(this).offset().left - parseInt($(this).css("margin-left")) + "px", 
     top: $(this).offset().top + $(this).height() - parseInt($(this).css("margin-top")) + "px" 
    }) 
}); 

Проверить это Ваш здесь: http://jsfiddle.net/zd78e8a3/1/

Answer 2

Вот один простой подход http://jsfiddle.net/xuatted6/

$('.layout_theme').on('click', function(){ 
     var offset = $(this).offset(); 
     $('.file_uploader').animate({top: offset.top + 20}, 500, function(){ 
      $(this).fadeIn(); 
     }); 
    }); 

Вы можете играть с эффектами :)