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 append，swap和sortable但是无法在不拖动的情况下弄清楚如何使用div（而不是ul）。

解决 感谢Lynel。 这是工作码本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();