邊欄菜單中的固定部分？

Question

我有一個功能，我想添加到我的邊欄菜單。

我的菜單包含的東西是這樣的：

--------------------- 
Folder 1 
\------> action 1 
\------> action 2 
\------> action X 
--------------------- 
--------------------- 
Folder 2 
\------> action 1 
\------> action X 
--------------------- 
--------------------- 
Folder 3 
\------> action 1 
--------------------- 
--------------------- 
Folder 4 
--------------------- 

而且我的網站的用戶可與他們不同的文件夾，但我想每個文件夾中一個按鈕，允許用戶「針」的文件夾中用戶將在一天中更頻繁地使用。就像一個按鈕一旦按下它將該文件夾部分移動到頂部。

每個文件夾的HTML是這樣的：

<li> 
    <div class="droppable folder expanded"> 
     <div class="folder_content"> 
      <div class="folder_name"> 
       Folder 1 
      </div> 
      <div class="folder_extra"> 
       <ul class="modules"> 
        <li>action 1</li> 
        ...... 
        <li>action X</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</li> 

Answer 1

這裏有一個簡單的解決方案。它使用prepend將文件夾設置爲固定部分。接下來將使用本地存儲來保存固定項目的順序。

JSFiddle

$('.pin').click(function() { 
 
    var file = $(this).closest('.folder_content'); 
 
    file.prependTo('.pinned'); 
 
});

.pinned, .unpinned { 
 
    border:black solid 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='pinned'></div> 
 
<div class='unpinned'> 
 
    <div class="folder_content"> 
 
     <div class="folder_name">Folder 1</div> 
 
     <button class='pin'>Pin</button> 
 
     <div class="folder_extra"> 
 
      <ul class="modules"> 
 
       <li>action 1</li>...... 
 
       <li>action X</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div class="folder_content"> 
 
     <div class="folder_name">Folder 2</div> 
 
     <button class='pin'>Pin</button> 
 
     <div class="folder_extra"> 
 
      <ul class="modules"> 
 
       <li>action 1</li>...... 
 
       <li>action X</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div class="folder_content"> 
 
     <div class="folder_name">Folder 3</div> 
 
     <button class='pin'>Pin</button> 
 
     <div class="folder_extra"> 
 
      <ul class="modules"> 
 
       <li>action 1</li>...... 
 
       <li>action X</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div class="folder_content"> 
 
     <div class="folder_name">Folder 4</div> 
 
     <button class='pin'>Pin</button> 
 
     <div class="folder_extra"> 
 
      <ul class="modules"> 
 
       <li>action 1</li>...... 
 
       <li>action X</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>