4

我正在尝试使用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>

Javasctipt 

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

谢谢

4

2 回答 2

2

我会尝试这样的事情：

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

但是你错过了这个.data('gridster')部分。

于 2013-02-09T21:26:31.000 回答
1

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');
于 2017-07-20T02:40:46.293 回答