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 で時刻と日付の型を保存する際の選択問題を分析する

推薦する

要素テーブルヘッダー行の高さの問題の解決

目次序文1. 問題の原因2. 解決策VueはelementUIテーブルtr thの高さと背景色を変更...

VMwareがLinuxシステムをインストールして起動した後に黒い画面が表示される問題を解決する

1. 設置環境1. HUAWEI mate x CPU i5 82500u、8g メモリ、独立グラフ...

Vue での props の使い方の紹介

序文: Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

ウェブページのCSSの優先順位について詳しく説明します

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

WINDOWS での MYSQL のインストールに関する詳細なチュートリアル

1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...

Alibaba Cloud で MySQL リモート接続を構成するための詳細な手順

序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...

HTML の相対パス (Relative Path) と絶対パス (Absolute Path) の詳細な理解

私は 1 年以上 Java Web 開発に携わっており、HTML または JSP ページの作成は避け...

HTMLでのフォーム送信の実装

フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...

MySQL マルチインスタンス構成のアプリケーションシナリオ

目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...

Vueプロジェクトの支払い機能コードの詳細な説明

1. Alipay方式: Alipay メソッド: Alipay をクリックして支払い、バックエンド...

JSは文字列内の指定された文字列のn番目の出現位置を取得します

文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...

Azure Container Registry を使用してイメージを保存する際の問題

Azure Container Registry は、Docker Registry 2.0 仕様に...

Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...

Linux環境でログファイルを表示するコマンドの詳細な説明

目次序文1. catコマンド: 2. moreコマンド: 3. lessコマンド: 4. headコ...