div를 div의 맨 위로 밀어 넣으십시오.

Question

div가 5 div 중에서 3이되고 div의 맨 위로 이동하여 div 아래의 다른 div를 눌러야하는 경우 어떻게 div를 페이지의 맨 위로 슬라이드시킬 수 있습니까? 그것은 위로 미끄러진다.

내가 찾은 가장 가까운 결과는 이것이다 : http://biostall.com/demos/swap-and-reorder-divs-smoothly-using-jquery/

그 유일한 문제는 내가 모든 div의

의 상단에 슬라이드 할 다른 사업부와 위치를 교환하는 것이있다

Answer 1

DEMO

HTML

Click on a box 
<img /> 
<img /> 
<img /> 
<img /> 
<img /> 

JS/JQ

var y = 100; 
$('img').each(function() { 
    $(this).css("top", y + "px"); 
    $(this).css("background-color", "rgb(0,90," + y + ")"); 
    y += 55; 
}); 


$('img').click(function (e) { 

    $(e.target).animate({ 
     top: "100" 
    }); 

    $(e.target).siblings().each(function() { 
     if ($(this).position().top < $(e.target).position().top) { 
      $(this).animate({ 
       top: "+=55" 
      }); 
     } 
    }); 

}); 

CSS

img { 
    height:50px; 
    width:50px; 
    position:absolute; 
    left:20px; 
    cursor:pointer; 
}