div 移动到列表顶部并调整大小

Question

我有这个 HTML 代码：

<div class="column">
            <div class="object">
                //some text and pictures
            </div>

            <div class="object">
               //some text and pictures
            </div>

            <div class="object">
               //some text and pictures
            </div>
</div>

我想单击这些 .object 中的任何一个，使其移动到该列表的顶部并变大。无需拖动 - 只需单击即可。

我尝试了 jquery 追加、交换和排序，但不知道如何在不拖动的情况下使用 div（不是 ul）做到这一点。

已解决 感谢莱内尔。这是工作代码笔 http://codepen.io/anon/pen/QwPqQa

Answer 1

您可以使用 javaScript 并利用 insertBefore 来实现您的目标。

function clicked( element ){
    var column = document.getElementById( 'column' );
    var node = element;
    column.insertBefore( element, column.childNodes[ 0 ] );
}

<div id="column">
    <div class="object" onclick="clicked( this )">
        some text and pictures 1
    </div>
    
    <div class="object" onclick="clicked( this )">
        some text and pictures 2
    </div>
    
    <div class="object" onclick="clicked( this )">
        some text and pictures 3
    </div>
</div>

Answer 2

要在列表顶部插入第二个元素，请使用：

var el = $(".column div:nth-child(1)");

$(".column").prepend(el);

el.remove();

要在列表底部插入第二个元素，请使用：

var el = $(".column div:nth-child(1)");

$(".column").append(el);

el.remove();

div 移动到列表顶部并调整大小

div moves to top of the list on click and resizes

html

jquery

click