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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaでSwaggerコンポーネントを統合する方法の詳細な説明
  • Java における一般的なソートアルゴリズムの最適化
  • Java の一般的な解析ツールである jackson と fastjson の使用
  • Javaでフィルターを使用する方法
  • Java 統合 Swagger ドキュメント コンポーネント

<<:  MySQLがファントムリードを解決する方法の詳細な説明

>>:  Nginx 書き換えジャンプの適用シナリオの詳細な説明

推薦する

MySQL インデックスの詳細な説明

目次1. インデックスの基本1.1 はじめに1.2 インデックスの仕組み1.3 インデックスの種類1...

MySQLインストール後のデフォルトデータベースの役割の詳細な説明

MySQL を学習すると、インストール後にいくつかのデフォルトのデータベースが付属していることに気付...

さまざまなReact状態マネージャーの解釈と使用方法

まず、状態マネージャーとは何か、そしてそれが何をするのかを知る必要があります。複数のページで同じプロ...

CSS フォーム検証機能の実装コード

レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...

シンプルな広告ウィンドウを実現するjs

この記事では、参考までに、シンプルな広告ウィンドウを実装するためのjsの具体的なコードを紹介します。...

MySQL OOM (メモリオーバーフロー) の解決策

OOM は「Out Of Memory」の略で、メモリオーバーフローを意味します。メモリ オーバーフ...

Docker ベースの Selenium 分散環境の構築

1.画像をダウンロードするdocker pull selenium/hub docker pull ...

docker-compose で Jenkins をインストールする際の実践的なメモ

ディレクトリを作成する cd /usr/local/docker/ jenkins-docker を...

cocoscreatorプレハブの詳しい説明

目次プレハブプレハブの作り方プレハブの役割1. 同じタイプのノードをバッチで作成する2. 特定の時間...

HTML メタタグの使用の概要 (推奨)

メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...

MySQL の大きなテーブルで大量のデータを一括削除する方法

質問はhttps://www.zhihu.com/question/440066129/answer...

WeChatアプレット開発の章:落とし穴の記録

最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイ...

スプレッド演算子のサンプルコードと JavaScript での応用

スプレッド演算子を使用すると、式をある時点で展開できます。スプレッド演算子は、複数のパラメーター (...

Linuxのwatchコマンドの使用

1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...

ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要

新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...