Internet Explorer 9、Firefox、Opera 12、Chrome、およびSafari 5は、ドラッグアンドドロップをサポートしています。
注: Safari 5.1.2のドラッグをサポートしないでください。 HTML5ドラッグアンドドロップインスタンス<! javascript> function apposdrop(ev){ev.preventdefault();} function drag(ev){ev.datatransfer.setdata(ev.target.id){ev.preventdefault(); ev.datatransfer.getData(テキスト); ev.target.appendChild(document.getElementbyId(data));} </script> </head> <p>ドラッグアンドドロップ= drop(event)ondragover = lockdrop(event)> div> <br/> <img id = drag1 src = http://www.aseoe.com/statics/images/eoe/logo.png dragggable = true ondragstart = drag (イベント)/> </body> </html>要素をドラッグアンドドロップに設定しますまず、要素をドラッグするために、ドラッグ可能なプロパティを真に設定します。
ドラッグdragstartとsetData()次に、要素がドラッグされたときに何が起こるかを指定します。
上記の例では、OndragStartプロパティは、ドラッグされたデータを指定する関数(イベント)を呼び出します。
datAtransfer.setData()メソッドデータのデータ型と値を設定します。
関数drag(ev){ev.datatransfer.setdata(text、ev.target.id);}この例では、データ型はテキストであり、値は要素をドラッグできるID(drag1)です。
it-ondragoverを置く場所Ondragoverイベントは、ドラッグされたデータを配置する場所を規定しています。
デフォルトでは、データ/要素を他の要素に配置することはできません。許容配置を設定する必要がある場合は、要素のデフォルト処理を防ぐ必要があります。
これは、event.preventdefault()ondragoverイベントの方法を呼び出すことです。:):
event.preventdefault()パッティングドロップ
ドラッグデータが配置されると、ドロップイベントが発生します。
上記の例では、Ondrop属性は関数、Drop(event)を呼び出します。
function drop(ev){ev.preventdefault();コード説明:Dateのブラウザのデフォルト処理を回避するには、PreventDefault()に電話してください(ドロップイベントのデフォルト動作がリンクで開かれます)
DataTransfer.getData(テキスト)メソッドを介してドラッグされたデータを取得します。この方法は、SetData()メソッドの同じタイプの任意のデータに戻ります。
ドラッグデータはドラッグ要素のIDです(drag1)
配置要素への追加のドラッグ要素(ターゲット要素)
要約します上記は、この記事のコンテンツをすべて習得したり、質問がある場合は、vevb wulin.comのサポートに感謝します。