DIV移動到列表頂部的點擊並調整

我有這樣的HTML代碼：DIV移動到列表頂部的點擊並調整

<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）沒有拖動。

求助感謝Lynel。這裏是工作codepen http://codepen.io/anon/pen/QwPqQa

來源

2015-04-01 Peter9382

你可以使用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>

來源

2015-04-01 22:49:33

我很感謝你的努力，但一旦我點擊一個div，風格dis apears。 http://codepen.io/anon/pen/QwPqQa – Peter9382 2015-04-01 23:14:47

我剛更新了我的代碼，告訴我現在是否適用於您。 – 2015-04-01 23:15:45

該死！很棒！有沒有添加動畫的選項，還是我必須使用特殊的庫？ – Peter9382 2015-04-01 23:17:34

要在列表從列表中使用的頂部插入第二元件：

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

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

el.remove();

要在列表的列表中的底部插入第二元件使用：

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

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

el.remove();

來源

2015-04-01 22:56:40

DIV移動到列表頂部的點擊並調整

回答

相關問題