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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js 正確なカウントダウン機能の共有
  • ID番号を確認するための超正確なJavaScriptメソッド
  • jsはシンプルな計算機を実装します
  • Apple 電卓の JS 実装
  • JavaScript シミュレーション計算機
  • シンプルな計算機機能を実現するJavaScript
  • JavaScript でテキストの行数を計算する方法
  • JavaScript の典型的なケースのシンプルな計算機
  • js 正確な計算

<<:  MySQLバッチは特定のフィールドのスペースを削除します

>>:  bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明

推薦する

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

Docker の MySQL コンテナのタイムゾーン問題の修正

序文Ahhang が Springboot プロジェクトを開発していたとき、フロントエンドから検証コ...

CSS での配置の使用方法の詳細な研究 (要約)

CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...

ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか

まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...

HTML 終了タグの問題と W3C 標準

W3C の原則によれば、XML の各開始タグには対応する終了タグが必要です。つまり、<html...

Linux インデックスノード inode の詳細な説明

1. inodeの紹介inode を理解するには、まずファイル ストレージから始める必要があります。...

vue3 のコンポーネントの互換性のない変更の詳細な説明

目次機能コンポーネント非同期コンポーネントの書き方とdefineAsyncComponentメソッド...

Docker で lnmp をデプロイする詳細な手順

目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...

MySQLインデックスの詳細な分析

序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...

VMware ESXi6.7 の簡単なセットアップ(画像とテキスト付き)

1. VMware vSphere の概要VMware vSphere は、業界をリードする最も信...

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...

入力が完了したことを検出し、次のコンテンツを自動的に入力する HTML を実装する方法

前回の記事では、入力完了の簡単な検出を実現しましたが、今回はさらに一歩進んで、入力が完了した後に次の...

Linux での sshd サービスとサービス管理コマンドの詳細な説明

sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...

jsを使用して簡単な抽選機能を実現する

この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...