Howto use Gridster with div (not ul)

Question

I'm trying to use Gridster, the jQuery Drag & Drop library. However, my HTML has a structure as in this JSFiddle ( http://jsfiddle.net/twashing/4xc6s/5/ ). And I can't get gridster to work. Ie, drag & drop behaviour doesn't happen.

My HTML structure has divs, not list items in an unordered list (ul > li). i) It's the .section-box classes that I want to make draggable, and replace with one another. How can I do this with Gridster?

ii) Barring that, I can even make the table row ( tr ) element, the draggable thing, if that's 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>

Javasctipt

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

Thanks

btw gridster is no longer maintained. Here is its replacement https://github.com/gridstack/gridstack.js — ta32, Jan 24 '22 at 06:15

score 2 · Answer 1 · answered Feb 09 '13 at 21:26

2

I would try something like this:

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

But you're missing the .data('gridster') part.

answered Feb 09 '13 at 21:26

dan-klasson

13,734
14
63
101

score 1 · Answer 2 · answered Jul 20 '17 at 02:40

"Using divs not li" is possible with the dmorse fork of gridster.js (http://dsmorse.github.io/).

Each movable item can be wrapped or defined by a DIV construct (rather than the usual LI).

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

Without this parameter change it assumes 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 the function call:

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

Howto use Gridster with div (not ul)

2 Answers2