单击时将div项目移动到div容器的顶部

品尝

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;
}
卢卡·德托米(Luca Detomi)

如果我正确理解了您的需求,则可以借助jQuery的一些prependTo方法来实现目标

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

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

更新:

如果您只想交换仓位,这里是一个变体。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击时将窗口滚动到div的顶部

来自分类Dev

将div移动到页眉顶部

来自分类Dev

单击每个按钮时将元素移动到顶部

来自分类Dev

jQuery-将div移动到其父级的顶部

来自分类Dev

将 div 移动到顶部的正确方法是什么?

来自分类Dev

jQuery在div单击时无法滚动到元素的顶部

来自分类Dev

单击div时滚动到顶部,如果滚动在顶部,则滚动到底部

来自分类Dev

如何将浮动div移动到容器的中心

来自分类Dev

CSS防止div移动到顶部

来自分类Dev

将div与容器顶部对齐

来自分类Dev

单击时隐藏容器div

来自分类Dev

使用CSS3动画将div从屏幕顶部移动到屏幕底部吗?

来自分类Dev

jQuery自动将div滚动到div并返回顶部

来自分类Dev

选中复选框时,将 div 移动到另一个 div

来自分类Dev

当顶部div扩展时,将div下移

来自分类Dev

用鼠标单击在 div 容器之间移动 div

来自分类Dev

切换时将div滚动到顶部(关闭或重新打开)

来自分类Dev

切换时将div滚动到顶部(关闭或重新打开)

来自分类Dev

在Flexbox中将元素移动到容器的顶部

来自分类Dev

将div滚动到浏览器顶部时,如何将div设置为position:fixed?

来自分类Dev

<div>在其容器的顶部

来自分类Dev

到达容器边缘时使div移动并反弹

来自分类Dev

根据身高div将div移动到他

来自分类Dev

通过单击元素内的锚点或包含div ID的任何地方,将元素滚动到页面顶部

来自分类Dev

窗口滚动到顶部时如何隐藏div?

来自分类Dev

滚动到“返回顶部”链接时,使div显示/隐藏

来自分类Dev

如何在单击时垂直移动div

来自分类Dev

使用UI Sortable,当我单击按钮时,是否可以根据给定的值将项目移动到新位置?

来自分类Dev

滚动时将Div置于页面顶部

Related 相关文章

热门标签

归档