JSは要素のドラッグとプレースホルダー機能を実装します

このブログ投稿は、ブロガーが数日前に取り組んだプロジェクトで遭遇した困難についてです。これを学んだ後、ページ要素を簡単に移動できます。いくつかの条件と組み合わせると、タスク完了の進捗状況を示すページを作成できます。

まずは効果を見てみましょう:

機能性:

あるセクションから別のセクションの特定の位置に要素をドラッグします。ブロガーは自分のニーズに合わせてこれを作成しました。クリックした要素は、それが配置されているモジュールの次のモジュールにのみ移動できます。別のモジュールに移動すると、元の位置に戻ります。また、ドラッグした要素の位置が一定の距離を超えない場合、自動的に元の位置に戻ります。

ケーススタディ:

重要なステップはこれです!マウスを押すと、現在の要素だけでなく、現在のモジュールも取得されます (したがって、最初に、各モジュールにインデックス属性を設定する必要があり、属性値は各モジュール自体のインデックス番号です)。このステップは、マウスを放したときに、移動先のモジュールが現在のモジュールの次のモジュールであるかどうかを判断することです (少しわかりにくいかもしれませんが、注意深く読んでください)。条件が満たされた場合は、移動先のモジュール内の要素との位置を 1 つずつ比較する必要があります (ここでは、要素を移動する特定の位置を決定します)。確認後、特定の位置に新しい空の要素を作成し、移動した要素のコンテンツをこの空の要素に追加する必要があります。これが最後のステップです。元の要素を削除することを忘れないでください。

コードの表示:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <script src="./js/jQuery.min.js"></script>
    <スタイル>
        * {
            マージン: 0;
            左: 0;
            リストスタイル: なし;
            ボックスのサイズ: 境界線ボックス;
        }
        。容器 {
            ディスプレイ: フレックス;
            コンテンツの両端揃え: スペースを空ける;
            幅: 1000ピクセル;
            高さ: 600px;
            マージン: 100px 自動;
            パディング: 0;
        }
        .コンテナ li {
            幅: 180ピクセル;
            高さ: 100%;
            背景色: プラム;
            境界線の半径: 10px;
            パディング: 5px;
        }
        。アイテム {
            幅: 170ピクセル;
            高さ: 100px;
            背景色: サーモン色;
            マージン: 5px 0;
            境界線の半径: 10px;
            カーソル: ポインタ;
        }
    </スタイル>
</head>
<本文>
    <ul class="コンテナ">
       <li>
           <div class="item">1</div>
           <div class="item">2</div>
           <div class="item">3</div>
       </li> 
       <li>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
       </li> 
       <li>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
       </li> 
       <li></li>
       <li></li>
    </ul>
    <スクリプト>
        $(関数(){
            (var i = 0; i < 5; i++) の場合 {
               $(".container li")[i].setAttribute('index', i);
            }
            $('.item').on('mousedown',function(e){
                var index = Number($(this).parent()[0].getAttribute('index'));
                //現在選択されているタスクの左余白と上余白を取得します。startLeft = $(this).offset().left;
                startTop = $(this).offset().top;
                // 選択したタスク内のマウスの位置を見つけます。mouseX = e.pageX - startLeft;
                マウスY = e.pageY - 先頭ページ;
                $(this).on('mousemove',function(e){
                    $(これ).オフセット({
                       左: e.pageX - mouseX、
                       上: e.pageY - mouseY        
                    })
                })
                $(this).on('マウスアップ',function(){
                    //アイテムが移動する位置を記録するために使用されます k = -1;
                    $(this).off('マウス移動');
                     // 選択されたモジュールの次のモジュールインデックスを取得します。if (index >= 4) {
                        インデックス = 3;
                    }
                    var next = $('.container li').eq(index + 1);
                     
                    //マウスを離したときに移動した距離が、選択したモジュールの次のモジュールの範囲内にある場合は、if ($(this).offset().left >= next.offset().left&&$(this).offset().left <= next.offset().left + next[0].offsetWidth) {を実行します。
                   // 選択した項目の内容を取得します。 var text = $(this).html();
                   // 最終的な場所に空のタスクを作成し、取得したコンテンツをそこに追加します var father = document.createElement('div');
                   父親.className = 'アイテム';
                   $(父).append(テキスト);
                  //現在クリックされている要素を取得します。var ele = $(this);
                 //現在のモジュールにアイテムがない場合、それを直接最初の位置に追加します。アイテムがある場合、その先頭とサイズの大きいものを比較し、その後ろに配置します。if (next.children().length == 0) {
                    next.append(父);
                } それ以外 {
                   $.each(next.children(), 関数(i,item) {
                    if (ele.offset().top > $(item).offset().top) {
                        k = i;
                    }
                   })
                    //k == -1の場合、タスクをモジュールの最初の位置に配置することを意味します。if (k == -1) {
                        next.children().eq(0).before(父);
                    } それ以外 {
                        next.children().eq(k).after(父);
                 }
                    
                }
                //移動イベントのバインドを解除し、元の位置にあるアイテムをクリアします
                $(this).off("マウス移動");
                $(this).remove();
                $(これ).空();
            } それ以外 {
                //ここで移動は失敗し、元の位置に戻ります $(this).offset({
                    左: 開始左、
                    トップ: 開始トップ
                })
                $(this).off("マウス移動");
            }
                })
            })
        })
    </スクリプト>
</本文>
</html>

拡張機能:

このケースでは、バックグラウンドデータと組み合わせることで、次の図に示すように、進行状況が異なる複数のタスクの表示とドラッグ効果を実現できます。

早く巻いて〜

要素のドラッグとプレースホルダー機能の JS 実装に関するこの記事はこれで終わりです。より関連性の高い JS 要素のドラッグとプレースホルダーのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

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