1

テーブルの行にドラッグ可能なイベントを追加しようとしていますが、必要なものが得られません。テーブル構造を作成しているのは剣道グリッドです。最終的には、可能であれば剣道ではないものに列を落としたいと思います。

HTML

<div id="Assets" style="width: 200px; float: left;" data-role="grid" class="k-grid k-widget" tabindex="0">
    <ul>
        <div class="k-widget k-grid" id="Assets">
            <div class="k-grid-header">
                <div class="k-grid-header-wrap">
                    <table cellspacing="0">
                        <colgroup>
                        <col style="width: 240px">
                    </colgroup>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="k-grid-content" style="height: 200px">
            <div class="k-grid-header" style="padding-right: 17px;">
                <div class="k-grid-header-wrap">
                    <table cellspacing="0">
                        <colgroup><col style="width: 240px"></colgroup>
                        <thead>
                            <tr data-role="draggable">
                                <th class="k-header" data-field="Id" data-title="Id" scope="col" style="display: none"><span class="k-link">Id</span></th>
                                <th class="k-header" data-field="Name" data-title="Name" scope="col"><span class="k-link">Name</span></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <table cellspacing="0" class="k-focusable">
            <colgroup><col style="width: 240px"/></colgroup>
            <tbody>
                <tr data-uid="cc7fc98a-dc66-4a46-8d3a-b73d608cf32b">
                    <td style="display: none">1</td>
                    <td>A Commons</td>
                </tr>
                <tr class="k-alt" data-uid="daf17bf4-52d3-43a4-acc0-034c7c53e5af">
                    <td style="display: none">2</td>
                    <td>A Chase</td>
                </tr>
                <tr data-uid="6dbe2dec-e9ce-4640-8f61-f1ee4469a581">
                    <td style="display: none">4</td>
                    <td>Beacon</td>
                </tr>
                <tr class="k-alt" data-uid="569798d6-433c-4dea-b56b-5833bab22058">
                    <td style="display: none">5</td>
                    <td>Seminole</td>
                </tr>
                <tr data-uid="4639277c-97eb-43d0-9aa1-6402671474b5">
                    <td style="display: none">6</td>
                    <td>Commons</td>
                </tr>
                <tr class="k-alt" data-uid="9ad1bf14-91bf-474f-9115-246c55c38eab">
                    <td style="display: none">3</td>
                    <td>Willows</td>
                </tr>
            </tbody>
        </table>
    </ul>
</div>

JS

これが私が必要とするtrを選択しようとしている私のコードです：

$(".k-focusable > tbody > tr").kendoDraggable({
    hint: function(e) {
        item = $('<div class="k-grid k-widget" style="background-color: lightblue; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
        return item;
    },
});

私はそれを純粋な方法でやりたいと思いますjQuery：

$("<selector>").draggable({
    cursor: 'move',
    distance: 40,
    helper: 'clone',
    opacity: 0.8,
    revert: 'invalid',
    revertDuration: 100,
    snap: 'div.node.expanded',
    snapMode: 'inner',
    stack: 'div.node',
});
4

1 に答える 1

3

ドロップしたときに何をしたいかわからないが、これは剣道グリッドからドロップ可能な領域に行を移動するトリックを行う必要がありますが、実際には要素を削除しないので、gridそうする必要があります（またはしない？）。

ドロップしたときに行うのは、移動する要素であり、これをターゲット領域にclone挿入します。clone

HTMLコード：

<div id="grid"></div>
<table id="target" class="k-widget k-grid">
    <thead>
        <tr>
            <th class="k-header" colspan="2">Drop inside red area</th>
        </tr>
    </thead>
</table>

JavaScriptグリッドの初期化：

var dataSource = new kendo.data.DataSource({
    data    : [
        {"ID": 1, "Nom": "John"},
        {"ID": 2, "Nom": "Jane"},
        {"ID": 3, "Nom": "Sam"},
        {"ID": 4, "Nom": "Charles"},
        {"ID": 5, "Nom": "Paul"},
        {"ID": 6, "Nom": "Josh"},
        {"ID": 7, "Nom": "Daniel"}
    ],
    pageSize: 8
});

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    columns   : [
        {field: "ID" },
        {field: "Nom"}
    ]
}).data("kendoGrid");

そして最後にドラッグアンドドロップ：

$("tr", grid.tbody).kendoDraggable({
    hint: function (e) {
        item = $('<div class="k-grid k-widget" style="background-color: lightblue; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
        return item;
    }
});

$("#target").kendoDropTarget({
    drop: function (e) {
        e.dropTarget.append($(e.draggable.currentTarget).clone());
    }
});

ここで実行されているのを見てください

于 2013-01-10T23:16:55.633 に答える