この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコードを共有しています。具体的な内容は次のとおりです。 序文
成果を達成する コードの実装 インデックス.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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLバッチは特定のフィールドのスペースを削除します
>>: bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明
この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...
序文Ahhang が Springboot プロジェクトを開発していたとき、フロントエンドから検証コ...
CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...
まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...
W3C の原則によれば、XML の各開始タグには対応する終了タグが必要です。つまり、<html...
1. inodeの紹介inode を理解するには、まずファイル ストレージから始める必要があります。...
目次機能コンポーネント非同期コンポーネントの書き方とdefineAsyncComponentメソッド...
目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...
<!DOCTYPE html> <html lang="ja"...
序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...
1. VMware vSphere の概要VMware vSphere は、業界をリードする最も信...
目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...
前回の記事では、入力完了の簡単な検出を実現しましたが、今回はさらに一歩進んで、入力が完了した後に次の...
sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...
この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...