Drag and Drop Framework の使用

// db1 からのソースとターゲットのみが互いにドラッグ アンド ドロップに参加できます
// 同じルールが db2 に適用され、db1 および db2 ソース間でドラッグ アンド ドロップ
// の組み合わせを一切実行できません
// ddb1 のソースは項目リストからの項目となることができ、ターゲットはショッピング カートです
var ddb1 = new $IG.DragDropBehavior();
// チャネルはキーを使用して作成されます
ddb1.addDragChannels(["cart"]);
ddb1.addDropChannels(["cart"]);
// ddb2 のソースはショッピング カートからの項目となることができ、そのターゲットはゴミ箱となることができます
var ddb2 = new $IG.DragDropBehavior();
ddb.addDragChannels(["trash"]);
ddb.addDropChannels(["trash"]);

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Infragistics45.Web.v23.1, Version=23.1.20231.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Name="Infragistics.Web.UI.SharedScripts.igDragDrop.js" />
        <asp:ScriptReference Assembly="Infragistics45.Web.v23.1, Version=23.1.20231.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Name="Infragistics.Web.UI.Scripts.5_igObjects.js" />
        <asp:ScriptReference Assembly="Infragistics45.Web.v23.1, Version=23.1.20231.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Name="Infragistics.Web.UI.SharedScripts.igAnimation.js" />
    </Scripts>
</asp:ScriptManager>

function pageLoad() {
        var ddb = new $IG.DragDropBehavior();
        var grid = $util.findControl("WebDataGrid1");
        var rows = grid.get_rows();
        var count = rows.get_length();
        // ソースを設定します
        for (var i = 0; i < count; i++) {
                // WebDataGrid の HTML 行を取得します
                var row = rows.get_row(i).get_element();
                ddb.addSourceElement(row);
        }
        // ターゲットを設定します
        ddb.addTargetElement($get("ListBox1"), true);
        // イベントを処理します
        ddb.get_events().addDropHandler(dropHandler);
        ddb.get_events().addDragStartHandler(dragStartHandler);
}

function dropHandler(sender, args) {
        // ドロップされた行を取得します
        var srcRow = args.get_manager().get_source().element;
        var grid = $util.findControl("WebDataGrid1");
        // 行をグリッド行に変換します
        var gridRow = grid.get_rows().get_row(srcRow.rowIndex - 1);
        var columns = grid.get_columns();
        // 行のセル値からリスト項目を作成します
        var listItem = document.createElement("option");
        var txt = "";
        for (var i = 0; i < columns.get_length(); i++) {
                if (!columns.get_column(i).get_hidden()) {
                        txt += gridRow.get_cell(i).get_value() + " ";
                }
        }
        listItem.text = txt;
        listItem.value = txt;
        // リスト項目を追加します
        var list = document.getElementById("ListBox1");
        list.options.add(listItem);
}

function dragStartHandler(sender, args) {
        // DragDropBehavior オブジェクトを取得します
        var ddb = sender;
        var grid = $util.findControl("WebDataGrid1");
        var rows = grid.get_rows();
        // ソース行を取得します
        var srcRow = args.get_manager().get_source().element;
        // 行のクローンを作成します
        var clonedRow = srcRow.cloneNode(true);
        clonedRow.className = "";
        // 行を配置するテーブルを作成します
        var table = document.createElement("table");
        table.id = "row_table";
        table.cellSpacing = 0;
        table.className = "row_table";
        // グリッド行からテーブルの正しい寸法を取得します
        table.style.width = rows.getRow(0).Element.clientWidth;
        table.style.height = rows.getRow(0).Element.clientHeight;
        // テーブルのボディを作成します
        var tbody = document.createElement("tbody");
        // 行をボディに追加し、ボディをテーブルに追加することによって行を追加します
        table.appendChild(tbody);
        tbody.appendChild(clonedRow);
        // 行がドラッグされる時に使用するためにテーブルを HTML マークアップとして設定します
        ddb.set_dragMarkup(table);
        ddb.set_dragMarkupOpacity(60);
}

.row_table
{
        border-right: solid 1px silver;
}
.row_table TBODY TR TD
{
        border: solid 1px silver; border-right: none; color: black;
}
.row_table TBODY TR TH
{
        display: none;
}