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 書き換えジャンプの適用シナリオの詳細な説明

推薦する

docker-compose ポートと expose の違いの詳細な説明

docker-compose でコンテナ ポートを公開する方法は、ports と expose の ...

さまざまなHTTPリターンステータスコードの詳細な説明

サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...

Win10+Ubuntu 20.04 LTS デュアル システム インストール (UEFI + GPT) (画像とテキスト、複数の画像には注意)

Win10 のインストール (すでにインストールされている場合はスキップしてください) win10...

Docker コンテナ データ ボリュームの名前付きマウントと匿名マウントの問題

目次コンテナデータボリュームとはコンテナ データ ボリュームが必要なのはなぜですか?使用データボリュ...

vue-element-admin プロジェクトのインポートとエクスポートの実装

vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...

jsはaudioContextを通じて3Dサウンド効果を実現します

この記事では、audioContextを介して3Dサウンド効果を実現するためのjsの具体的なコードを...

CSS3 シンプルカットカルーセル画像実装コード

実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...

CSS3 天子グリッドリストのスタイルの書き方

多くのプロジェクトでは、中央に灰色の分割線があり、両側に分割線がないグリッド表示の機能を実装する必要...

1 分で Nginx のバージョンをスムーズにアップグレードおよびロールバックする方法

今日は、企業の実際の本番環境でよく遭遇する、Nginx を新しいバージョンにアップグレードし、古いバ...

MySQL で置換操作を使用したときにデータ損失が発生する問題の解決策

序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...

Linux ベースの MySQL マスター スレーブ構成の全プロセスを記録する

mysql マスタースレーブ構成1. 準備ホスト: 192.168.244.128スレーブ: 192...

よく使われる3つのMySQLデータ型

MySQL のデータ フィールドのタイプを定義することは、データベースを最適化するために非常に重要で...

DockerはRedisをインストールし、操作用のビジュアルクライアントを導入します

1 はじめにRedis 、 ANSI C言語で開発されたKey-Valueベースの高性能NoSQLデ...

Linux で Multitail コマンドを使用するチュートリアル

MultiTail は、tail コマンド機能と同様に、複数のドキュメントを同時に監視するために使用...

nginxでの共有メモリの使用に関する詳細な説明

nginx プロセス モデルでは、トラフィック統計、トラフィック制御、データ共有などのタスクを完了す...