HTML5 のドラッグ アンド ドロップ操作 HTML5 は Web ページ要素のドラッグ アンド ドロップ操作を実装します_html5 チュートリアル スキル

<script><br> function init(){<br> var info = document.getElementById("info");<br> //ドラッグ アンド ドロップされた要素を取得します。この例では、フォトアルバムは DIV<br> var src = document.getElementById("album");<br> //ドラッグアンドドロップ操作を開始<br> src.ondragstart = function (e) {<br> //ID を取得ドラッグ アンド ドロップされた写真 <br> varragImgId = e.target.id;<br> //ドラッグされた要素を取得します<br> varragImg = document.getElementById(dragImgId);<br> //ドラッグ アンド ドロップ操作が終了します<br>ragImg.ondragend = function(e){<br> //リマインダー情報を復元<br> info.innerHTML="<h2>注意喚起: 写真をゴミ箱に直接ドラッグできます</h2>"; <br> }; <br> e.dataTransfer.setData("text",dragImgId);<br> };<br> //ドラッグアンドドロップ処理中 <br> src.ondrag = function(e){ <br> info.innerHTML=" <h2>--写真はドラッグ中です--</h2>";<br> }<br> //ドラッグ アンド ドロップのターゲット要素を取得します<br> var target = document. getElementById("trash"); <br> //デフォルトの処理をオフにする; <br> target.ondragenter = function(e){<br> e.preventDefault();<br> }<br> target.ondragover = function (e){<br> e .preventDefault(); <br> }<br> //ターゲット要素に何かがドラッグ アンド ドロップされます <br> target.ondrop = function (e) {<br> varraggedID = e .dataTransfer.getData("text"); <br> //アルバム内の DOM オブジェクトを取得します <br> var oldElem = document.getElementById(draggedID);<br> //アルバム DIV から写真のノードを削除します<br> oldElem.parentNode.removeChild(oldElem); <br> // ドラッグした写真 DOM ノードをゴミ箱 DIV に追加します。 <br> target.appendChild(oldElem);<br> info.innerHTML="<h2&gt ;暖かいヒント: 写真をゴミ箱に直接ドラッグできます</h2>";<br> e.preventDefault();<br> }<br> }<br> </script>