この記事の例では、テーブルドラッグオプションを実装するための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. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...
少し前にSQLの独学を終え、MySQL 8.0.17をダウンロードしました。インストールして設定した...
dockerの登場により、多くのサービスが徐々にハードウェアアーキテクチャへの依存から脱却しました。...
HTML に CSS を追加するにはどうすればいいですか? HTML で CSS を設定する方法は ...
序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...
プロシージャ sp_name を削除します//これまで、MYSQL 構文の基礎知識について説明して...
url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...
この記事では、Gobangゲームを実装するためのキャンバスの具体的なコードを参考までに共有します。具...
目次1. 切り替え方法2. タブを動的に生成する3. キャッシュコンポーネント3.1 キープアライブ...
JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考ま...
MySQL 8.0.16で初回ログイン時のパスワードを変更する方法を紹介します。 MySQLデータベ...
1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...
目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...
インストール手順1. Redisをインストールするdocker search redis和docke...
1つ。まず、アイデアとしてパッケージ化する必要があります。私はSpringbootフレームワークプロ...