侧边栏菜单中的固定部分

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>