title: Howto use Gridster with div (not ul)
body: <p>I'm trying to use <a href="http://gridster.net/" rel="nofollow">Gridster</a>, the jQuery Drag &amp; Drop library. However, my HTML has a structure as in this JSFiddle ( <a href="http://jsfiddle.net/twashing/4xc6s/5/" rel="nofollow">http://jsfiddle.net/twashing/4xc6s/5/</a> ). And I can't get gridster to work. Ie, drag &amp; drop behaviour doesn't happen. </p>
  
  <p>My HTML structure has divs, not list items in an unordered list (ul > li). <strong>i)</strong> It's the .section-box classes that I want to make draggable, and replace with one another. How can I do this with Gridster? </p>
  
  <p><strong>ii)</strong> Barring that, I can even make the table row ( tr ) element, the draggable thing, if that's possible. </p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/twashing/4xc6s/5/" rel="nofollow">http://jsfiddle.net/twashing/4xc6s/5/</a></p>
  
  <p><strong>HTML</strong> 
  <code></p>
  
  <pre><code>&lt;tbody&gt;
      &lt;tr style="" class="ready"&gt;
          &lt;td style="position: relative;"&gt;
              &lt;div class="edit-section" style=""&gt;Planet of the Apes&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr data-id="15AE995E-2630-A314-81EB-DB1C46F147F4" style="" class="ready"&gt;
          &lt;td style="position: relative;"&gt;
              &lt;div class="section-box grid-top-row" data-id="1" data-row="1" data-col="1" &gt;
                  &lt;div class="section-box-overlay" &gt;1&lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="vertical-line ready" style=""&gt;
          &lt;td style="position: relative;"&gt;
              &lt;div class="vertical-line-left"&gt;&lt;/div&gt;
              &lt;div class="vertical-line-right"&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr data-id="CE29FFE8-4A61-CE84-0137-E2464705C588" style="" class="ready"&gt;
          &lt;td style="position: relative;"&gt;
              &lt;div class="section-box" data-id="2" data-row="2" data-col="1" &gt;
                  &lt;div class="section-box-overlay" &gt;2&lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="vertical-line ready" style=""&gt;
          &lt;td style="position: relative;"&gt;
              &lt;div class="vertical-line-left"&gt;&lt;/div&gt;
              &lt;div class="vertical-line-right"&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr style="" class="ready"&gt;
          &lt;td style="position: relative;"&gt;
              &lt;div class="section-box-add"&gt;
                  &lt;div class="section-box-add-label"&gt;&lt;/div&gt;
                  &lt;div class="box-label" style="color: rgb(95, 95, 97);"&gt;Add a related screen
                      &lt;br&gt;to this section&lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></code></p>
  
  <p><strong>Javasctipt</strong>
  <code></p>
  
  <pre><code>$(function() {
      $("tbody &gt; tr &gt; td").gridster({
          widget_margins: [5, 5]
      })
  });
  </code></pre>
  
  <p></code></p>
  
  <p>Thanks </p>