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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLがファントムリードを解決する方法の詳細な説明
>>: Nginx 書き換えジャンプの適用シナリオの詳細な説明
docker-compose でコンテナ ポートを公開する方法は、ports と expose の ...
サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...
Win10 のインストール (すでにインストールされている場合はスキップしてください) win10...
目次コンテナデータボリュームとはコンテナ データ ボリュームが必要なのはなぜですか?使用データボリュ...
vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...
この記事では、audioContextを介して3Dサウンド効果を実現するためのjsの具体的なコードを...
実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...
多くのプロジェクトでは、中央に灰色の分割線があり、両側に分割線がないグリッド表示の機能を実装する必要...
今日は、企業の実際の本番環境でよく遭遇する、Nginx を新しいバージョンにアップグレードし、古いバ...
序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...
mysql マスタースレーブ構成1. 準備ホスト: 192.168.244.128スレーブ: 192...
MySQL のデータ フィールドのタイプを定義することは、データベースを最適化するために非常に重要で...
1 はじめにRedis 、 ANSI C言語で開発されたKey-Valueベースの高性能NoSQLデ...
MultiTail は、tail コマンド機能と同様に、複数のドキュメントを同時に監視するために使用...
nginx プロセス モデルでは、トラフィック統計、トラフィック制御、データ共有などのタスクを完了す...