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 を応援していただければ幸いです。

以下もご興味があるかもしれません: