4

jQuery Drag & Drop ライブラリであるGridsterを使用しようとしています。ただし、私の HTML は、この JSFiddle ( http://jsfiddle.net/twashing/4xc6s/5/ ) のような構造になっています。そして、グリッドスターを動作させることができません。つまり、ドラッグ アンド ドロップの動作は発生しません。

私の HTML 構造には、順序付けられていないリスト (ul > li) のリスト項目ではなく、div があります。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>

Javaスクリプト 

$(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 に答える