コメント：ネチズンは、ドラッグアンドドロップの効果を達成するためにJavaScriptを使用しないかどうかを常に確認したいことでした。今日、HTML5は次に詳細な紹介を行いました。知る必要がある友達はそれを参照できます。
Web開発では、JavaScriptを使用してドラッグアンドドロップ効果を実現する必要があります。今日はHTML5を使用して実装しましょう。
最初にコアHTMLコードを見てみましょう：
<div>
<p>小さな黄色の正方形を大きな赤い箱にドラッグします</p>
</div>
<div draggable = "true">
</div>
<div>
</div>
Draggableプロパティは、HTML5によって新たに追加されています。 3つの値があります：true、false、auto。 Trueはドラッグされます、Falseは許可されていません。 Autoは、ユーザーのブラウザがそれをサポートするかどうかに依存します。詳細については、公式ドキュメントを参照してください。
少しスタイルを追加します：
<style type = "text/css">
＃落とす
{
幅：300px;
高さ：200px;
バックグラウンドカラー：＃ff0000;
パディング：5px;
国境：2pxソリッド＃000000;
}
＃アイテム
{
幅：100px;
高さ：100px;
バックグラウンドカラー：＃ffff00;
パディング：5px;
マージン：20px;
ボーダー：1pxダッシュ＃000000;
}
*[draggable = true] {
-moz-user-select：none;
-khtml-user-drag：element;
カーソル：移動;
}
*：-khtml-drag {
背景色：RGBA（238,238,238、0.5）;
}
</style>
次に、JavaScriptを見てみましょう。
function ristenevent（eventTarget、eventType、eventHandler）{
if（eventtarget.addeventlistener）{
eventTarget.AddeventListener（eventType、eventHandler、false）;
} else if（eventTarget.attachevent）{
eventType = "on" + eventType;
eventTarget.attachevent（eventType、eventHandler）;
} それ以外 {
eventTarget ["on" + eventType] = eventHandler;
}
}
//イベントをキャンセルします
関数cancelevent（event）{
if（event.preventdefault）{
event.preventdefault（）;
} それ以外 {
event.returnValue = false;
}
}
//伝播をキャンセルします
関数cancelpropagation（event）{
if（event.stoppropagation）{
event.stoppropagation（）;
} それ以外 {
event.cancelbubble = true;
}
}
window.onload = function（）{
var target = document.getElementById（ "drop"）;
ListenEvent（Target、 "Dragenter"、cancelevent）;
ListenEvent（ターゲット、「ドラッグオーバー」、ドラッグオーバー）;
ListenEvent（ターゲット、 "drop"、function（evt）{
CancelPropagation（EVT）;
evt = evt || window.event;
evt.datatransfer.dropeffect = 'copy';
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 || window.event;
evt.datatransfer.effectallowed = 'copy';
evt.datatransfer.setdata（ "text"、item.id）;
}）;
};
関数dragover（evt）{
if（evt.preventdefault）evt.preventdefault（）;
evt = evt || window.event;
evt.datatransfer.dropeffect = 'copy';
falseを返します。
}
上記のコードから、HTML5のセットを使用して提供されるドラッグアンドドロップイベントを調べ、次を直接検討します。
ドラッグスタート
ドラッグイベントが始まります。
ドラッグ
ドラッグ操作中。
ドラッグセンター
ドラッグはターゲットを超えています。ターゲットがドロップを受け入れるかどうかを判断するために使用されます。
ドラッグオーバー
ドラッグはターゲットを超えています。ユーザーへのフィードバックを決定するために使用されます。
落とす
ドロップが発生します。
ドラッグリーブ
ドラッグの葉のターゲット。
ドラッグエンド
ドラッグ操作の終了。
関連するイベントを定義して、目的の関数を実装します。上記のJSを理解するのは難しくありません。
自分で試すことができます。現在、それはオペラで最高のものをサポートしていますが、IE効果は良くありません。
それがあなたのウェブ開発に役立つことを願っています。