jsはテーブルドラッグオプションを実装します

jsはテーブルドラッグオプションを実装します

この記事の例では、テーブルドラッグオプションを実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • テーブルループスクロールを実現するネイティブjs
  • JavaScript ドラッグテーブル行実装コード
  • マウスをドラッグしてテーブルの幅を動的に変更するjsスクリプトは、ie/firefoxと互換性があります
  • モバイル端末上でシンプルなスライドテーブルを実現するjs

<<:  Linux および Unix サーバーのセキュリティを強化する方法

>>:  MySQL で時刻と日付の型を保存する際の選択問題を分析する

推薦する

Docker に Solr 8.6.2 をインストールし、中国語の単語セグメンターを構成する方法

1. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...

Windows で削除された MySQL 8.0.17 のルート アカウントとパスワードを回復する方法

少し前にSQLの独学を終え、MySQL 8.0.17をダウンロードしました。インストールして設定した...

Kali に docker と portainer をインストールする方法

dockerの登場により、多くのサービスが徐々にハードウェアアーキテクチャへの依存から脱却しました。...

CSSリンクと@importの違いの詳細な説明

HTML に CSS を追加するにはどうすればいいですか? HTML で CSS を設定する方法は ...

MySQL DMLステートメントの使用に関する詳細な説明

序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...

Mysql データベース ストアド プロシージャの基本構文の説明

プロシージャ sp_name を削除します//これまで、MYSQL 構文の基礎知識について説明して...

webpack イメージを base64 に変換する例

url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...

Gobangゲームを実現するためのjsキャンバス

この記事では、Gobangゲームを実装するためのキャンバスの具体的なコードを参考までに共有します。具...

Vueタブとキャッシュページを切り替えるいくつかの方法

目次1. 切り替え方法2. タブを動的に生成する3. キャッシュコンポーネント3.1 キープアライブ...

Taobao の商品画像切り替え効果を実現する JavaScript

JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考ま...

MySQL 8.0 をインストールした後、初めてログインするときにパスワードを変更する問題を解決する

MySQL 8.0.16で初回ログイン時のパスワードを変更する方法を紹介します。 MySQLデータベ...

Linux crontab コマンドの使用

1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...

JavaScript は詳細なコードで星座クエリ機能を実装します

目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...

Linux環境にRedisをデプロイし、Dockerにインストールする方法

インストール手順1. Redisをインストールするdocker search redis和docke...

アイデアのパッケージ化とクラウドサービスへのアップロードにおけるプロジェクトプロセスの分析

1つ。まず、アイデアとしてパッケージ化する必要があります。私はSpringbootフレームワークプロ...