c# - HTML5Itunesドラッグアンドドロップアプリは似ています

Question

iPhoneでアプリを移動するときにItunesのように見えるカスタムWEBSITEメニューを作成したい（ https://www.youtube.com/watch?v=ySx-rLJ0Ng0のようなもの）。基本的に、ソースとして1つのリスト、宛先として1つのグリッドがありますが、グリッドには20アイテムごとにページングまたはグループ化があります。

これまで、c＃asp.net HTML5とJqueryを使用して作成しましたが、グループ化またはページングを作成できません（並べ替え可能なリストの方法を使用しましたが、このソースからグリッドにcssを変更しましたhttp [：] // farhadi.ir/projects/html5sortable/）。

それを作る方法について何かアイデアはありますか？

ここに作りたいものを描きます http://imageshack.us/photo/my-images/69/whatiwant.png/

私が言ったように、私はページごとに最大容量20アイテムを持つ1つのグリッドと、グリッドにデータを入力するための1つのリストを持っています。グリッドに20を超えるアイテムを配置すると、グリッドにアイテムを配置するための新しいページが表示されます。

今、私はHTML5とjqueryを使用しました、これが私のコードです：

<section id="demos">
    <style>
        #demos section {
            overflow: hidden;
        }
        .sortable {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .sortable.grid {
            overflow: hidden;
            width: 500px;
            background-image:url('Images/background.png');
            background-repeat:repeat-y;
        }
        .sortable li {
            list-style: none;
            border: 1px solid #CCC;
            background: #F6F6F6;
            color: #1C94C4;
            margin: 5px;
            padding: 5px;
            height: 22px;
        }
        .sortable.grid li {
            line-height: 80px;
            float: left;
            width: 80px;
            height: 80px;
            text-align: center;
            font-size:x-small;
        }
        .handle {
            cursor: move;
        }
        .sortable.connected {

            min-height: 100px;
            float: left;
        }
        li.disabled {
            opacity: 0.5;
        }
        li.highlight {
            background: #FEE25F;
        }
        li.sortable-placeholder {
            border: 1px dashed #CCC;
            background: none;
        }
    </style>

    <section>
        <h1>Connected Sortable Lists</h1>
        <ul id="sortable4" class="connected sortable grid">
                        <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
               </ul>
        <table style="display: block; height: 400px; overflow-y: scroll;">
        <tr>
            <td>
                <ul id="sortable5" class="connected sortable list">
            <li class="highlight">Item A</li>
            <li class="highlight">Item B</li>
                </ul>
            </td>
        </tr>
        </table>
    </section>

グリッドでパギングを行う方法がわかりません。

ありがとうございました