HTMLドラッグドラッグイベント

HTMLではイベント処理はjsで行われます。HTML、js、CSSは切り離せません。以下はjsでのドラッグアンドドロップイベントの処理例です。

ドラッグ イベントは 2 つの部分に分かれており、1 つはドラッグ ターゲット (つまり、ドラッグ ターゲット) の処理であり、もう 1 つはドラッグされたターゲット (つまり、リリース ターゲット) の処理です。

ドラッグ ターゲット (ソース要素) でイベントをトリガーします:

ondragstart - ユーザーが要素のドラッグを開始するとトリガーされます

ondrag - 要素がドラッグされているときにトリガーされます

ondragend - ユーザーがドラッグを完了した後トリガー要素

ターゲットを解放するときにトリガーされるイベント:

ondragenter - このイベントは、マウスでドラッグされたオブジェクトがそのコンテナーのスコープに入ったときにトリガーされます

Ondragover - ドラッグされたオブジェクトが別のオブジェクトのコンテナー スコープ内にある場合object このイベントは、ドラッグ時にトリガーされます

ondragleave - このイベントは、マウスでドラッグされたオブジェクトがコンテナーのスコープから離れるとトリガーされます

ondrop - このイベントは、ドラッグプロセス中にマウスボタンが放されたときにトリガーされます

実装コードは次のとおりです: box1 とリストは相互にドラッグできます

       
  
 
 
数据1
 
数据2
 
数据3
 
数据4
 
数据5
 
数据6
 
  

その中で: getElementsByTagName() メソッドは、指定されたタグ名を持つオブジェクトのコレクションを返すことができます。

e.preventDefault(); は、システムのデフォルトのドラッグ イベントを防止します。

appendChild() は、指定されたコントロールにコントロールを追加します。

e.preventDefault();

以上がHTMLドラッグイベントの内容です。皆様のお役に立てれば幸いです。

関連する推奨事項:

JS と html を使用して簡単なスケッチパッド コードを作成する

DOM オブジェクトを操作する Js プロセス

html js 関連の質問

以上がHTMLドラッグドラッグイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。