javascript_html5 チュートリアルのテクニックに頼らずに HTML5 にドラッグ アンド ドロップ効果を実装する

Web 開発でドラッグ アンド ドロップ効果を実現したい場合は、JavaScript を使用する必要があります。今日は Html5 を使用して実装してみましょう:
最初に HTML コア コードを見てください:

コードをコピー

コードは次のとおりです:

小さな黄色の四角形を大きな赤いボックスにドラッグします

draggable 属性は HTML5 で新しく追加されました。true、false、auto の 3 つの値があります。true はドラッグ可能、false はユーザーのブラウザがサポートしているかどうかによって異なります。詳細については、公式ドキュメントを参照してください。

少しスタイルを追加します
:

コードをコピーしますコードは次のとおりです:

次に、JavaScript を見てみましょう。 >

コードをコピーします
コードは次のとおりです:

function listenEvent(eventTarget,eventType,eventHandler) ) {

if (eventTarget .addEventListener) { eventTarget.addEventListener(eventType,eventHandler,false); } else if (eventTarget.attachEvent) { eventType = "on" eventTarget.attachEvent(eventType,eventHandler ); } else {

eventTarget["on"eventType] =

}

}
// イベントをキャンセルします
function cancelEvent (イベント) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;伝播のキャンセル
function cancelPropagation (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true; 🎜>}
window.onload=function() {
var target = document.getElementById("drop");
listenEvent(target,"dragenter",cancelEvent); "dragover"、dragOver);
listenEvent(target,"drop",function (evt) {
cancelPropagation(evt);
evt = evt || window.event;
evt.dataTransfer. dropEffect = 'コピー';
var id = evt.dataTransfer.getData("Text");
target.appendChild(document.getElementById(id));
var item = document.getElementById("item") ;
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || ウィンドウ.event; dataTransfer.effectAllowed = 'コピー'
}; (evt) {
if (evt.preventDefault) evt.preventDefault();
evt = evt ||
evt.dataTransfer.dropEffect = 'copy';
}


上記のコードから、HTML5 によって提供される一連のドラッグ アンド ドロップ イベントが使用されていることがわかります。
dragstart
Drag イベントを直接見てみましょう。
drag
ドラッグ操作中、
dragover
ドラッグはターゲット上で使用されます。
drop
ドロップが発生します。
dragend
ドラッグ操作が終了します。上記の J を理解するのは難しくありません。
Opera は現在最高のサポートを提供していますが、IE はうまく動作しません。
あなたの Web 開発に役立つことを願っています