データグリッド - オブジェクトのドラッグ＆ドロップ

4D Ajax Framework v11.1の新しいデータグリッドは、組み込みのドラッグ＆ドロップ機能を持ちます。 この例では二つのデータグリッドオブジェクト間でドラッグ＆ドロップを有効にする方法をお見せします。 三つの異なる方法でドラッグ＆ドロップを処理できます。

ドラッグ可能オプションを有効にする

データグリッドのドラッグ可能オプションを有効にするには、グリッドオブジェクトでコマンドsetDragCellsを実行しなければなりません。 このコマンドはまたグリッドオブジェクトが構築された後も実行しなければなりません (dragGrid.go();)。

    シンタックス: dragGrid.setDragCells(row, column, isDroppable);

ドロップ可能オプションを有効にする

データグリッドでドロップ可能オプションを有効にするには、グリッドオブジェクトの"ondragrelease"イベントを有効にします。 このイベントを使用して開発者は、オブジェクトがセルにドロップされた際の特定のレスポンスを検知することができます。このイベントを有効にするには、 JavaScript関数をイベントにセットします。

    シンタックス: dropGrid.ondragrelease = YourFunction;

この例では、ondragreleaseイベントに応答する関数として、"onDragReleaseEvent"を定義しています。例の中で以下のように使用されています:

    dropGrid.ondragrelease = onDragReleaseEvent;

この関数はondragreleaseイベントに応答し、二つの引数を受け取ります。この例で、onDragReleaseEvent関数は以下のようなものです:

    function onDragReleaseEvent(cellRef, event) {
        // Do something here
    }

ドラッグオーバーされたセルのビジュアル効果を提供するために、グリッドオブジェクトの"ondragover"イベントを有効にます。 このイベントを使用して開発者は、オブジェクトがセルにドラッグオーバーされた際の特定のレスポンスを検知できます。 このイベントを有効にするには、JavaScript関数をイベントにセットします。

    シンタックス: dropGrid.ondragover = YourFunction;

この例では、ondragreleaseイベントに応答する関数として、"onDragOverEvent"を定義しています。例の中で以下のように使用されています:

    dropGrid.ondragover = onDragOverEvent;

ondragreleaseイベントと同様、この関数はondragoverイベントに応答し、二つの引数を受け取ります。この例で、onDragOverEvent関数は以下のようなものです:

    function onDragOverEvent(cellRef, event) {
        // Do something here
    }

すべての例で、ondragoverイベントはドラッグオーバーされたセルの背景色を一時的に変更するために使用されています。 これを行うには、結果としてCSSスタイル名を返すだけです。

    function onDragOverEvent(cellRef, event) {
        return 'dragdrop_style';
    }

例

例 1: 単純なドラッグ＆ドロップ
ondragreleaseが関数onDragReleaseEventを呼び出すと、onDragReleaseEvent関数はドロップされたセル参照を引数に渡してdoexample1関数を実行します。

    function doexample1(cellRef){
        var originCell = dax_bridge.hoverDragging.dragObjectSource;
        var srcvalue = originCell.value;
        dropGrid.setCellValue(cellRef.row, cellRef.column, srcvalue);
    }

セルがドロップされると、ドラッグされたセルの値を取り出し、setCellValueコマンドを使用してドロップしたセルに値を設定します。

例 2: リストのドラッグ＆ドロップ (挿入)
ondragreleaseが関数onDragReleaseEventを呼び出すと、onDragReleaseEvent関数はドロップされたセル参照を引数に渡してdoexample2関数を実行します。

    function doexample2(cellRef){
        var originCell = dax_bridge.hoverDragging.dragObjectSource;
        var srcvalue = originCell.value;
        if(cellRef.row < dropcount){
            var relocatevalue = '';
            for(var i=dropcount; i>=cellRef.row; i--){
                relocatevalue = dropGrid.getCellValue(i, cellRef.column);
                dropGrid.setCellValue(i+1, cellRef.column, relocatevalue);
            }
            dropGrid.setCellValue(cellRef.row, cellRef.column, srcvalue);
        }else{
            dropGrid.setCellValue(dropcount, cellRef.column, srcvalue);
        }
    }

すべてのドロップされたイベントについて、変数dropcountが1ずつインクリメントされ、ドロップされた項目の総数を追跡するために使用されます。 ドロップ位置がdropcount以下の場合、ドロップされた行およびそれより下の値は一つずつ下に移動されます。 ドロップされた位置にはドラッグされたセルの値が挿入されます。

例 3: リストのドラッグ＆ドロップ (カット＆ペースト効果)
ondragreleaseが関数onDragReleaseEventを呼び出すと、onDragReleaseEvent関数はドロップされたセル参照を引数に渡してdoexample3関数を実行します。

    function doexample3(cellRef){
        var originCell = dax_bridge.hoverDragging.dragObjectSource;
        var srcvalue = originCell.value;
        if(cellRef.row < dropcount){
            var relocatevalue = '';
            for(var i=dropcount; i>=cellRef.row; i--){
                relocatevalue = dropGrid.getCellValue(i, cellRef.column);
                dropGrid.setCellValue(i+1, cellRef.column, relocatevalue);
            }
            dropGrid.setCellValue(cellRef.row, cellRef.column, srcvalue);
        }else{
            dropGrid.setCellValue(dropcount, cellRef.column, srcvalue);
        }
        // Remove drop item from the original list
        var rownum = dragGrid.getParsedDataRecordCount();
        for(var i=originCell.row; i<=rownum; i++){
            relocatevalue = dragGrid.getCellValue(i+1, originCell.column);
            dragGrid.setCellValue(i, originCell.column, relocatevalue);
        }
    }

この例は例 2と同じものですが、ドラッグオーバーされたセルはグリッドから自動で取り除かれます。