小さな黄色の四角形を大きな赤いボックスにドラッグします
< /div>
draggable 属性は HTML5 で新しく追加されました。true、false、auto の 3 つの値があります。true はドラッグ可能、false はユーザーのブラウザがサポートしているかどうかによって異なります。詳細については、公式ドキュメントを参照してください。
少しスタイルを追加します
:
次に、JavaScript を見てみましょう。 >
コードをコピーします
コードは次のとおりです:
}
}
// イベントをキャンセルします
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 開発に役立つことを願っています