How to use gridster with div (not ul)

Question

I am trying to use Gridster , the jQuery Drag and Drop library. However, my HTML has a structure like in this JSFiddle ( http://jsfiddle.net/twashing/4xc6s/5/ ). And I can't get the setter to work. That is, drag and drop does not occur.

My HTML structure has divs, not list items in an unordered list (ul> li). i) These are the .section-box classes that I want to make draggable and replace them with each other. How can I do this with Gridster?

ii) If this is not possible, I can even make the table (tr) element of the table, if possible.

JSFiddle: http://jsfiddle.net/twashing/4xc6s/5/

HTML

 <tbody> <tr style="" class="ready"> <td style="position: relative;"> <div class="edit-section" style="">Planet of the Apes</div> </td> </tr> <tr data-id="15AE995E-2630-A314-81EB-DB1C46F147F4" style="" class="ready"> <td style="position: relative;"> <div class="section-box grid-top-row" data-id="1" data-row="1" data-col="1" > <div class="section-box-overlay" >1</div> </div> </td> </tr> <tr class="vertical-line ready" style=""> <td style="position: relative;"> <div class="vertical-line-left"></div> <div class="vertical-line-right"></div> </td> </tr> <tr data-id="CE29FFE8-4A61-CE84-0137-E2464705C588" style="" class="ready"> <td style="position: relative;"> <div class="section-box" data-id="2" data-row="2" data-col="1" > <div class="section-box-overlay" >2</div> </div> </td> </tr> <tr class="vertical-line ready" style=""> <td style="position: relative;"> <div class="vertical-line-left"></div> <div class="vertical-line-right"></div> </td> </tr> <tr style="" class="ready"> <td style="position: relative;"> <div class="section-box-add"> <div class="section-box-add-label"></div> <div class="box-label" style="color: rgb(95, 95, 97);">Add a related screen <br>to this section</div> </div> </td> </tr> </tbody> 

code>

Javasctipt

 $(function() { $("tbody > tr > td").gridster({ widget_margins: [5, 5] }) }); 

code>

thanks

Answer 1

I would try something like this:

 $(function() { $("tbody tr").gridster({ widget_margins: [5, 5], widget_selector: "> td" }) }); 

But you are missing the .data('gridster') .

Answer 2

"Using divs not li" is possible with dmorse fork gridster.js ( http://dsmorse.imtqy.com/ ).

Each movable element can be wrapped or defined by a DIV construct (rather than a regular LI).

Just give each DIV element a meaningful class name and use the [widget_selector: classnameORhtmlconstruct] parameter to tell Gridster to look for div.myclass.

Without changing this parameter, it is assumed that LI (List-item)

Example:

 <div class="gridster"> <div class="myGrid"><!-- grid elements now --> <div class="myGridItem" data-sizey="2" data-sizex="2" data-col="4" data-row="1">... stuff in here</div> <div class="myGridItem" data-sizey="1" data-sizex="1" data-col="1" data-row="3">... stuff in here</div> etc etc <!-- end grid elements --></div> </div> 

In a function call:

  $(function(){ gridster = $(".gridster > div.myGrid").gridster({ widget_margins: [5, 5], widget_selector: 'div.myGridItem' }).data('gridster');