この記事の例では、テーブルドラッグオプションを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 トピックの要件は下図に示されています。具体的なアイデアは、ドラッグして選択項目を変更することであり、使用されるイベントは js ドラッグ関連イベントです。 コード: <!doctypehtml> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="ビューポート" コンテンツ="幅=デバイス幅、ユーザースケーラブル=いいえ、初期スケール=1.0、最大スケール=1.0、最小スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> *{ マージン: 0; パディング: 0; } ul、li{ リストスタイル: なし; カーソル: ポインタ; } .specWrap{ 幅: 800ピクセル; マージン: 0 自動; ユーザー選択: なし; } 。仕様{ 境界線: 1px 実線 #ccc; 幅: 100%; 位置: 相対的; } .sp-トップ{ 高さ: 60px; 行の高さ: 60px; テキスト配置: 中央; ボックスのサイズ: 境界線ボックス; } .sp-トップul{ オーバーフロー: 非表示; } .sp-トップ ul li{ 幅: 33%; フロート: 左 } .sp-top ul li:nth-of-type(2){ 左境界線: 1px 実線 #ccc; 右境界線: 1px 実線 #ccc; } .sp-cen{ テキスト配置: 左; ボックスのサイズ: 境界線ボックス; 下境界線: 1px 実線 #ccc; 上境界線: 1px 実線 #ccc; テキストインデント: 20px; オーバーフロー: 非表示; } 。画面{ 幅: 33%; フロート: 左; } .screen:n番目の型(2){ 左境界線: 1px 実線 #ccc; 右境界線: 1px 実線 #ccc; } .sp-btm{ テキスト配置: 左; ボックスのサイズ: 境界線ボックス; テキストインデント: 20px; オーバーフロー: 非表示; } 。解決{ 幅: 33%; フロート: 左; } .解像度:型のn番目(2){ 左境界線: 1px 実線 #ccc; 右境界線: 1px 実線 #ccc; } .btn{ フロート: 右; 幅: 60ピクセル; マージン: 20px 0; } </スタイル> </head> <本文> <div class="specWrap"> <div class="仕様"> <div class="sp-top"> <ul> <li>仕様</li> <li>レベル仕様</li> <li>選択済み</li> </ul> </div> <div class="sp-cen"> <div class="screen"> <p>画面サイズ</p> </div> <div class="screen"> <ul class="size"> <li>4</li> <li>4.5</li> <li>5</li> <li>5.5</li> <li>6</li> <li>6.5</li> </ul> </div> <div class="screen sc"></div> </div> <div class="sp-btm"> <div class="解像度"> <p>画面解像度</p> </div> <div class="解像度"> <ul class="resolu"> <li>高解像度 (720p)</li> <li>フル HD (1080p)</li> <li>クアッド HD (2K) クアッド HD (2K)</li> <li>ウルトラ HD (4K)</li> </ul> </div> <div class="解像度 re"></div> </div> </div> <div> <button class="btn">送信</button> </div> </div> </本文> <スクリプト> var size = document.getElementsByClassName('size')[0].children; //サイズリスト var resolu = document.getElementsByClassName('resolu')[0].children; //解像度リスト var specWrap = document.getElementsByClassName('specWrap')[0]; for(let i=0;i<size.length;i++){ //sizeはsize[i]を選択します。function (e) { //プレスイベント for(var i=0;i<size.length;i++){ サイズ[i].style.position=''; size[i].style.background=''; } var e=e||イベント; var lf=e.offsetX; var tp=e.offsetY; var 現在の値 = this; current.style.position='絶対'; document.function(e){ //モバイルイベント var e=e||event; var x = e.clientX-specWrap.offsetLeft-lf; var y=e.clientY-specWrap.offsetTop-tp; 現在のスタイルは left です。 現在のスタイルのトップ=y+'px'; } document.function(){ //マウスリリースイベント document.null; document.getElementsByClassName('sc')[0].innerHTML=現在の.innerHTML; 現在のスタイルの位置=''; } } } for(let i=0;i<resolu.length;i++){ //解像度の選択、コードをカプセル化できますが、ここではカプセル化しません resolu[i].function (e) { for(var i=0;i<resolu.length;i++){ resolu[i].style.position=''; resolu[i].style.background=''; } var e=e||イベント; var lf=e.offsetX; var tp=e.offsetY; var 現在の値 = this; current.style.position='絶対'; 現在のスタイルzIndex=6; ドキュメント.function(e){ var e=e||イベント; var x = e.clientX-specWrap.offsetLeft-lf; var y=e.clientY-specWrap.offsetTop-tp; 現在のスタイルは left です。 現在のスタイルのトップ=y+'px'; } ドキュメント.function(){ ドキュメント.null; document.getElementsByClassName('re')[0].innerHTML=現在の.innerHTML; 現在のスタイルの位置=''; } } } </スクリプト> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux および Unix サーバーのセキュリティを強化する方法
>>: MySQL で時刻と日付の型を保存する際の選択問題を分析する
目次序文1. 問題の原因2. 解決策VueはelementUIテーブルtr thの高さと背景色を変更...
1. 設置環境1. HUAWEI mate x CPU i5 82500u、8g メモリ、独立グラフ...
序文: Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...
目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...
序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...
私は 1 年以上 Java Web 開発に携わっており、HTML または JSP ページの作成は避け...
フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...
目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...
1. Alipay方式: Alipay メソッド: Alipay をクリックして支払い、バックエンド...
文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...
Azure Container Registry は、Docker Registry 2.0 仕様に...
導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...
目次序文1. catコマンド: 2. moreコマンド: 3. lessコマンド: 4. headコ...