JavaScript を使用して div の位置をドラッグして入れ替える例

1 実施原則

これは、DOM 要素の dragstart/ondragover/ondrop イベントを使用して行われます。ドラッグが開始されるとドラッグされた要素が取得され、その後ドラッグが許可されます。最後に、マウスを持ち上げて新しい位置にドロップします。ここでは、event.preventDefault() メソッドが使用されます。多くの人が混乱するかもしれません。ここで簡単に説明します。

event.preventDefault(): このメソッドは、ブラウザがイベントに関連付けられたデフォルトのアクションを実行しないようにします。

dragover イベントでこれを使用します。dragover に関連付けられたデフォルトのアクションは、データまたは要素が他の要素に配置されないようにすることです。そのため、event.preventDefault() を通じてデフォルトのイベントを禁止し、要素を新しい位置にドラッグできるようにする必要があります。

<!-- div をドラッグして順序を変更します。GIS のレイヤー順序の切り替えにも適用できます -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
  <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
        体{
            ディスプレイ: フレックス;
            パディング: 100px;
            flex-direction: 列;
        }
        div{
            幅: 100ピクセル;
            高さ: 100px;
            テキスト配置: 中央;
        }
    </スタイル>
 
</head>
<本文>
   <div style="background-color: red;width:200px;height:200px;" draggable="true">赤</div>
    <div style="background-color: green;width:100px" draggable="true">緑</div>
    <div style="background-color: blue;" draggable="true">青</div>
</本文>
<script type="text/javascript">
    div = document.getElementsByTagName("div"); とします。
    コンテナを null にします。
    // ドラッグスタート、ドラッグオーバー、ドロップイベントを各divにトラバースしてバインドします for(let i=0;i<div.length;i++){
        div[i].ondragstart=関数(){  
            コンテナ=これ
        }
        div[i].ondragover=関数(){
            イベントをデフォルトにしない();
        }
        div[i].ondrop=関数(){
            デバッガ;
            if(コンテナ!=null&&コンテナ!=this){
                // 具体的な考え方は変数値の交換と同じです。let temp=document.createElement("div");
                document.body.replaceChild(temp,this); //新しく作成されたdivを使用して、宛先の位置を占めます。document.body.replaceChild(this,container); //宛先のdivは開始位置に配置されます。document.body.replaceChild(container,temp) //開始のdivは宛先の位置に配置されます。debugger; 
                console.log('ビジネスロジックを実行')
            }
        }
    }
</スクリプト>
</html>

これで、JavaScript のドラッグと div の位置の入れ替えの実装例に関するこの記事は終了です。JavaScript のドラッグと入れ替えの div コンテンツに関する関連情報をさらに知りたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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