ホームページ > 記事 > ウェブフロントエンド > javascript_html5 チュートリアルのテクニックに頼らずに HTML5 にドラッグ アンド ドロップ効果を実装する
javascript_html5 チュートリアルのテクニックに頼らずに HTML5 にドラッグ アンド ドロップ効果を実装する
- WBOYオリジナル
- 2016-05-16 15:50:371210ブラウズ
Web 開発でドラッグ アンド ドロップ効果を実現したい場合は、JavaScript を使用する必要があります。今日は Html5 を使用して実装してみましょう:
最初に HTML コア コードを見てください:
コードをコピー
コードは次のとおりです: 小さな黄色の四角形を大きな赤いボックスにドラッグします
< /div>
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 開発に役立つことを願っています
// イベントをキャンセルします
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 開発に役立つことを願っています
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。