コメント：HTML5の前に、Webページ要素のドラッグアンドドロップ操作を実装するには、Mousedown、Mousemove、MouseUp、およびその他のAPIに依存して、大量のJSコードを通じて実装する必要がありました。現在、HTML5は、Webページ要素のドラッグアンドドロップ操作の難しさを大幅に簡素化します。ブラウザ内の要素のドラッグアンドドロップをサポートすることに加えて、APIはブラウザと他のアプリケーション間でデータのドラッグをサポートします。
HTML5の前に、Webページ要素のドラッグアンドドロップ操作を実装するには、Mousedown、Mousemove、MouseUp、およびその他のAPIに依存して、大量のJSコードを通じて実装する必要があります。 HTML5は、ドラッグアンドドロップ操作を直接サポートするAPIを導入します。これにより、Webページ要素のドラッグアンドドロップ操作のプログラミングの難しさが大幅に簡素化されます。ブラウザ内の要素のドラッグアンドドロップをサポートすることに加えて、これらのAPIはブラウザと他のアプリケーション間のデータドラッグもサポートしています。
この記事では、簡単な例を使用して、HTML5でAPIをドラッグアンドドロップする方法を示しています。
シーン：
下の図に示すように、実装したい：
左のアルバムエリアから写真をドラッグしてドロップして右ゴミ缶エリアにドラッグします。ドラッグプロセス中に、温かいリマインダー部分を迅速に思い出させる必要があり、ドラッグアンドドロップ操作が現在実行されています。
実装方法：
上記のインターフェースに示すように、HTMLコードは次のように比較的単純です。
<！doctype html>
<html>
<head>
<Title> HTML5はドラッグアンドドロップ操作を実装しています</title>
<Meta charset = "utf-8"/>
<style>
。アルバム
{
ボーダー：3pxダッシュ#ccc;
フロート：左;
マージン：10px;
Min-Height：100px;
パディング：10px;
幅：220px;
}
</style>
</head>
<body ">
<div>
<h2>温かいリマインダー：写真をゴミ箱に直接ドラッグできます</h2>
</div>
<div>
<h2>アルバム</h2>
<img draggable = "true" src = "img /bg_01.png" />
<img draggable = "true" src = "img /bg_02.png" />
<img draggable = "true" src = "img /bg_03.png" />
</div>
<div>
<h2>ゴミ箱</h2>
</div>
<br/>
</body>
</html>
注：ドラッグアンドドロップ操作を実装する場合は、ドラッグおよびドロップする要素にdraggable = true属性を追加する必要があります。
次に、次のJSコードをオンロードイベントに追加します。コメントはより詳細であり、個別に説明されません。
<スクリプト>
function init（）{
var info = document.getElementById（ "Info"）;
//ドラッグアンドドロップ要素を取得します。この例は、アルバムがあるDivです。
var src = document.getElementById（ "アルバム"）;
//ドラッグアンドドロップ操作を開始します
src.ondragstart = function（e）{
//ドラッグアンドドロップ写真IDを取得します
var dragimgid = e.target.id;
//ドラッグされた要素を取得します
var dragimg = document.getElementById（dragimgid）;
//ドラッグアンドドロップ操作が終了します
dragimg.ondragend = function（e）{
//リマインダーメッセージを回復します
info.innerhtml = "<h2>クリエイティブリマインダー：写真を直接ゴミ箱にドラッグできます</h2>";
};
e.datatransfer.setData（ "Text"、dragimgid）;
};
//プロセスをドラッグアンドドロップします
src.ondrag = function（e）{
info.innerhtml = "<h2> - 写真がドラッグされている - </h2>";
}
//ターゲット要素をドラッグアンドドロップします
var target = document.getElementById（ "Trash"）;
//デフォルトの処理を閉じます。
Target.ondragenter = function（e）{
E.PreventDefault（）;
}
Target.ondragover = function（e）{
E.PreventDefault（）;
}
//何かがドラッグしてターゲット要素にドロップします
Target.Ondrop = function（e）{
var draggedId = e.datatransfer.getData（ "text"）;
//アルバムでDOMオブジェクトを取得します
var oldelem = document.getElementById（draggedId）;
//アルバムDivから写真のノードを削除する
oldelem.parentnode.removechild（oldelem）;
//ドラッグされた写真domノードをゴミdivに追加します。
Target.AppendChild（OldElem）;
info.innerhtml = "<h2>クリエイティブリマインダー：写真を直接ゴミ箱にドラッグできます</h2>";
E.PreventDefault（）;
}
}
</script>
効果を実現します：