在被点击时将div项目移动到div容器的顶部

Question

!http://postimg.org/image/ym5xp7ilv/

我想要实现的是移动div项目,当点击每个项目时,它被点击在div容器的顶部...其余的项目(那些没有被点击的)将填充div的其余部分容器分别

HTML

    <div class="row">
        <div class="col-md-12">
            <div class="containing_div">
                <div class="container_div"></div>
                <div class="menu_div">
                    <div class="item_div">Photos</div>
                    <div class="item_div">Video</div>
                    <div class="item_div">Music</div>
                    <div class="item_div">Files</div>
                    <div class="item_div">Contacts</div>
                </div>
            </div>
        </div>
    </div>

CSS

.containing_div
{
  height: 100%;
}

.container_div
{
  background: #fff;
  height: 100%;
  width: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  font-family: "Open Sans";
  font-size: 26px;
  float: left;
  padding-top: 25px;
  position: relative;
}

.menu_div
{
  background: transparent;
  float: left;
}

.item_div
{
  background: #ddd;
  height: 80px;
  color: #bbb;
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 10px;
  text-align: center;
  padding: 8px;
  border-radius: 0 2% 2% 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  cursor: hand;
}

Answer 1

如果我正确地理解了你想要的东西,你可以通过一些jQuery实现你的目标,这要归功于prependTo方法.

这里是工作示例和jQuery函数.

$('.item_div').on('click',function(){
    $(this).prependTo('.container_div');
});

更新:

如果你想简单地交换头寸,这里有一个变化.

$('.item_div').on('click',function(){
    $(this).prependTo('.menu_div');
});