検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5_html5 チュートリアル スキルで要素のドラッグを実装する方法

HTML5_html5 チュートリアル スキルで要素のドラッグを実装する方法

WBOY
WBOYオリジナル
2016-05-16 15:51:441622ブラウズ

多くのフロントエンドは、おそらく HTML5 ドラッグ アンド ドロップの実装方法を理解していません。この記事では、いくつかのアイデアを提供します。後で簡単に参照できるように、ファイルを整理してバックアップします。

最初の例:

index.html

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭>
  4. <メタ charset="UTF- 8">
  5. <タイトル>ドラッグタイトル>
  6. <スタイル>
  7. .box{
  8. 幅: 400px;   
  9. 高さ: 400px;   
  10. float: 左;   
  11. }
  12. #box1{
  13. 背景: #CCC;   
  14. }
  15. #box2{
  16. 背景: #FF0;   
  17. }
  18. スタイル>
  19. 頭>
  20. <ボディ>
  21. <div id="box1" クラス="ボックス">div>
  22. <div id="box2" クラス="ボックス">div>
  23. <img src="http: //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />
JavaScript コード复制コンテンツ到剪贴板
  1.   
  2.   
  3.   
  5. app1.js
  6. /**
  7. * app1.js
  8.  */
  10. var oBox1,
  11. oBox2、
  12. oImg1;   
  14. window.onload = 関数(){
  15. oBox1 = document.getElementById('box1');   
  16. oBox2 = document.getElementById('box2');   
  17. oImg1 = document.getElementById('img1');   
  19. //
  20. oBox1.ondragover = oBox2.ondragover = 関数(e){
  21. e.preventDefault();   
  22. };   
  24. //
  25. oImg1.ondragstart = 関数(e){
  26. e.dataTransfer.setData('text', e.target.id);   
  27. };   
  29. oBox1.ondrop = dropImg;   
  30. oBox2.ondrop = dropImg;   
  31. };   
  33. 関数 dropImg(e){
  34. e.preventDefault();   
  35. var tempImg = document.getElementById(e.dataTransfer.getData('text'));   
  36. e.target.appendChild(tempImg);   
  37. }

知識ポイントを含む

ドラッグ アンド ドロップのプロセス中に次のイベントがトリガーされます:
ドラッグ ターゲット (ソース要素) でイベントをトリガーします
ondragstart - ユーザーが開始します要素のドラッグ トリガー条件
ondrag - 要素がドラッグされているときにトリガーされます
ondragend - ユーザーが要素のドラッグを終了した後にトリガーされます

ターゲットが解放されたときにトリガーされるイベント
 ondragenter - このイベントは、マウスでドラッグされたオブジェクトがコンテナー スコープに入ったときにトリガーされます
ondragover - オブジェクトが解放されたときにトリガーされますドラッグされています このイベントは、ドラッグされたオブジェクトが別のオブジェクトのコンテナ範囲内にドラッグされるとトリガーされます
ondragleave - このイベントは、マウスでドラッグされているオブジェクトがコンテナ範囲を離れるとトリガーされます
ondrop - ドラッグ プロセス中に、このイベントは、マウスボタンが放されたときにトリガーされます

イベントオブジェクト (e に置き換えられます)

e.ターゲット

W3Cschool の説明は次のとおりです: このイベントをトリガーした要素 (イベントのターゲット ノード) を返します。このターゲット属性は ie9 以降とのみ互換性があります。

e.preventDefault()

イベントのデフォルトのアクションをキャンセルします。

e.dataTransfer.setData()

ドラッグしたデータのデータ型と値を設定します:

コードをコピーします
コードは次のとおりです:
e. dataTransfer.setData("Text",ev.target.id); //最初のパラメータは Text (小文字も許容されます)

e.dataTransfer.getData()

ドラッグされたデータを取得します:

コードをコピーします
コードは次のとおりです:
e.dataTransfer .getData( "テキスト");

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

原文: http://www.cnblogs.com/oovwall/p/5213580.html

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5: Web 標準における最大の進歩_html5 チュートリアルのヒント次の記事：HTML5: Web 標準における最大の進歩_html5 チュートリアルのヒント

関連記事

続きを見る