js ドラッグアンドドロップテーブルでコンテンツ計算を実現する

この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコードを共有しています。具体的な内容は次のとおりです。

序文

ExcelのWebバージョンを作成する
H5 の新機能:ドラッグ可能、コンテンツ編集可能

成果を達成する

コードの実装

インデックス.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>テーブル</title>
    <スタイル>
        テーブル、th、tr、td {
            マージン: 0;
            パディング: 0;
            幅: 800ピクセル;
            テキスト配置: 中央;
            境界線: 実線 1px #000;
        }

        td {
            幅: 自動;
            背景色: ピンク;
        }
        .ops {
            カーソル: 移動;
        }
    </スタイル>
</head>
<本文>
<テーブルid="テーブル">
    <ヘッドid="ヘッド">
    <tr id="ヘッダー">
        <th>1</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</テーブル>
<script src="main.js"></script>
</本文>
</html>

メイン.js

テーブルを作成します(10,10);
初期化();
// テーブルの初期化 // @param1: rows, 行数 // @param2: cols, 列数 function createTable(rows, cols) {
    ヘッダーを document.getElementById('header') とします。
        本文 = document.getElementById('tbody');

    (i = 0; i < 行; i++) の場合 {
        tmp = ''とします
            trEle = document.createElement('tr');
        (j = 0; j < cols; j ++) の場合 {
            //頭
            (i <= 1)の場合{
                tmp += `<th>${j}</th>`;
            }
            それ以外 {
                tmp += `<td class="ops" draggable="true">${i}</td>`;
            }
        }
        // コンソールログ(tmp);
        i <= 1の場合、header.innerHTML = tmp;
        それ以外{
            trEle.innerHTML = tmp;
            body.appendChild(trEle);
        }
    }
}

/*
* テーブルドラッグ * */
関数init(){
    x、y、データを入力します。
    document.body.addEventListener('クリック', イベント=>{
        イベントをデフォルトにしない();
    });

    document.body.addEventListener('dragstart', イベント => {
        if (event.target.nodeName.toLowerCase() !== 'td'){
            alert('正しいコンテンツを選択してください');
            false を返します。
        }

        // コンソール.log(イベント);
        x = イベント.クライアントX - 5,
        y = イベント.クライアントY - 5,
        データ = parseInt(event.target.firstChild.data);
        img = new Image();
        'test.png' をアップロードしてください。
        イベントデータ転送時にドラッグイメージを設定する(img, 0,0);
        // console.log(x, y, データ);
    });

    //デフォルトの処理を防ぐ document.body.addEventListener('dragover', event => {
        イベントをデフォルトにしない();
    });

    document.body.addEventListener('ドロップ', イベント => {
        tmp = new dragCalculation(x,y,data); とします。
        endX = event.clientX - 5 とします。
            終了Y = イベント.クライアントY - 5、
            endData = parseInt(event.target.firstChild.data);
        // コンソールにイベントをログ出力します。
        // コンソール.log(isNaN(endData))
        if (isNaN(endData)) {
            alert('移動位置エラー');
            false を返します。
        }
        // console.log(endX, endY, endData);
        結果を tmp.sum(endX, endY, endData) とします。
        イベントターゲットの最初の子データ = 結果;
        イベントターゲットスタイルの背景色 = '#b4e318'

    });
}

dragCalculation = function (x, y, データ) とします。
    this.startX = x;
    開始Y = y;
    this.startData = データ;
};

dragCalculation.prototype.sum = 関数 (x, y, データ) {
    // 詳細な境界判定を行う必要がある if (this.startX == x ||
    this.startY == y ||
    isNaN(データ)) {
        alert('そこに放置しないでください');
        false を返します。
    }

// データを取得して返す + this.startData;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: