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 コマンドにパスワードを渡す方法の詳細な説明

推薦する

Mysql5.7 のグループ連結関数を使用するときにデータが切り捨てられる問題に対する完璧な解決策

一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...

Vueカスタムディレクティブを使用してドラッグアンドドロッププラグインを構築する方法

HTML5 のドラッグ アンド ドロップ機能は誰もが知っていますが、これを使用するとドラッグ アンド...

AngularJSにおける括弧の役割の詳細な説明

1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...

Vue2.x プロジェクトのパフォーマンス最適化のためのコード最適化の実装

目次1 v-ifとv-showの使用2. 計算と監視を区別する3 v-for トラバーサルでは、アイ...

インライン要素スパンの最小高さの定義

span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...

Docker Docker の保存場所を変更する コンテナイメージのサイズ制限を変更する操作

これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...

HTML でフォーム コントロールを無効にする 2 つの方法: readonly と disabled

Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...

Reactソースコードにおけるビット演算について詳しく説明します

目次序文いくつかの一般的なビット操作ビットAND (&)ビットOR (|)ビット否定(~)マ...

vue-router のハッシュモードと履歴モードの違い

vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...

calc() で全画面背景の固定幅コンテンツを実現

ここ数年、Web デザインには「全幅背景と固定幅コンテンツ」というトレンドが生まれています。このデザ...

SASSで変数のデフォルト値を使用する方法

SASS で定義された変数では、後で設定された値によって古い値が上書きされます。 $色: 赤; $色...

jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...

WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか

今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...

非常に優れた CSS スキル 10 選のコレクションと共有

ここでは、CSS テクニックを巧みに使用することで、HTML を変更せずにブログやテンプレートの外観...

JavaScript データ プロキシとイベントの詳細な分析

目次データブローカーとイベントObject.defineProperty メソッドのレビューデータブ...