title: HTML5 Itunes drag drop app look alike
body: <p>I want to make custom <strong>WEBSITE</strong> menu that <strong>looks like</strong> Itunes when moving apps in iphone
  (something like this <a href="https://www.youtube.com/watch?v=ySx-rLJ0Ng0" rel="nofollow">https://www.youtube.com/watch?v=ySx-rLJ0Ng0</a>).
  basically I'll have 1 list as source and 1 grid as destination, but the grid will have paging or grouping per 20 items.</p>
  
  <p>so far I've using c# asp.net HTML5 and Jquery to create but I can't make the grouping or the paging (I used the method of sortable list but I modified the css to grid from this source http[:]//farhadi.ir/projects/html5sortable/).</p>
  
  <p>Do you have any Idea how to make it?</p>
  
  <p>I draw what I want to make in here
  <a href="http://imageshack.us/photo/my-images/69/whatiwant.png/" rel="nofollow">http://imageshack.us/photo/my-images/69/whatiwant.png/</a></p>
  
  <p>Just like I said, I have 1 grid  that have maximum capacity 20 items per page, and 1 list to populate the grid. All I want to have is when I put more than 20 items in the grid, the grid will show new page to put the item</p>
  
  <p>right now I used HTML5 and jquery, here is my code:</p>
  
  <pre><code>&lt;section id="demos"&gt;
      &lt;style&gt;
          #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;
          }
      &lt;/style&gt;
  
      &lt;section&gt;
          &lt;h1&gt;Connected Sortable Lists&lt;/h1&gt;
          &lt;ul id="sortable4" class="connected sortable grid"&gt;
                          &lt;li&gt;Item 1&lt;/li&gt;
              &lt;li&gt;Item 2&lt;/li&gt;
              &lt;li&gt;Item 3&lt;/li&gt;
              &lt;li&gt;Item 4&lt;/li&gt;
                 &lt;/ul&gt;
          &lt;table style="display: block; height: 400px; overflow-y: scroll;"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;ul id="sortable5" class="connected sortable list"&gt;
              &lt;li class="highlight"&gt;Item A&lt;/li&gt;
              &lt;li class="highlight"&gt;Item B&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>I just have no Idea how to make pagging in my grid.</p>
  
  <p>Thank you</p>