如何将 Gridster 与 div 一起使用（不是 ul）答案

【问题标题】：Howto use Gridster with div (not ul)如何将 Gridster 与 div 一起使用（不是 ul）
【发布时间】：2013-01-22 19:09:26
【问题描述】：

我正在尝试使用Gridster，jQuery 拖放库。但是，我的 HTML 的结构与此 JSFiddle (http://jsfiddle.net/twashing/4xc6s/5/) 中的结构相同。而且我无法让gridster工作。即，不会发生拖放行为。

我的 HTML 结构有 div，而不是在无序列表 (ul > li) 中列出项目。 i) 我希望将 .section-box 类设置为可拖动并相互替换。我怎样才能用 Gridster 做到这一点？

ii)除此之外，如果可能的话，我什至可以使表格行 (tr) 元素成为可拖动的元素。

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>

Javastipt

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

谢谢

【问题讨论】：

btw gridster 不再维护。这是它的替代品github.com/gridstack/gridstack.js

标签： javascript jquery jquery-ui drag-and-drop gridster

【解决方案1】：

我会尝试这样的事情：

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

但是您缺少 .data('gridster') 部分。

【讨论】：

【解决方案2】：

使用 gridster.js (http://dsmorse.github.io/) 的 dmorse 分支可以实现“使用 divs not li”。

每个可移动项目都可以由 DIV 构造（而不是通常的 LI）包装或定义。

只需给每个 DIV 元素一个有意义的类名并使用 [widget_selector: classnameORhtmlconstruct] 参数告诉 Gridster 查找 div.myclassname。

如果不更改此参数，则假定为 LI（列表项）

例子：

<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>

在函数调用中：

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

【讨论】：