この記事の例では、コンテンツの計算を実現するための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 コマンドにパスワードを渡す方法の詳細な説明
一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...
HTML5 のドラッグ アンド ドロップ機能は誰もが知っていますが、これを使用するとドラッグ アンド...
1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...
目次1 v-ifとv-showの使用2. 計算と監視を区別する3 v-for トラバーサルでは、アイ...
span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...
これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...
Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...
目次序文いくつかの一般的なビット操作ビットAND (&)ビットOR (|)ビット否定(~)マ...
vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...
ここ数年、Web デザインには「全幅背景と固定幅コンテンツ」というトレンドが生まれています。このデザ...
SASS で定義された変数では、後で設定された値によって古い値が上書きされます。 $色: 赤; $色...
この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...
今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...
ここでは、CSS テクニックを巧みに使用することで、HTML を変更せずにブログやテンプレートの外観...
目次データブローカーとイベントObject.defineProperty メソッドのレビューデータブ...