ホームページ > 記事 > ウェブフロントエンド > HTML5 でドラッグ アンド ドロップを実装するためのサンプル コードを共有する
HTML5 でドラッグ アンド ドロップを実装するためのサンプル コードを共有する
- 零下一度オリジナル
- 2017-05-04 15:36:471988ブラウズ
html5では、APIインターフェースのドラッグアンドドロップがサポートされており、この機能を使用して、ブラウザと他のアプリケーションの間でデータをドラッグアンドドロップできます。この操作を実行するには、次の2つの手順を実行する必要があります。 1) ドラッグアンドドロップするオブジェクト
ラベルのdraggable属性をtrueに設定します。この方法では、タグをドラッグ アンド ドロップすることができます。また、img タグ と a タグを true に指定する必要があり、デフォルトでドラッグ アンド ドロップが許可されます。 (2) ドラッグアンドドロップに関連するイベント処理
コードを記述します。 よく使用される再生イベントは次のとおりです: ドラッグスタートはドラッグアンドドロップ操作を開始します ドラッグ ドラッグアンドドロッププロセス中に
ドラッグアンドドロップされたラベルの入力が開始されます。このラベルのスコープ
ドラッグオーバー ドラッグされたラベルはこのラベルのスコープ内で移動します
ドラッグリーブ ドラッグされたラベルはこのラベルのスコープを離れます
ドロップ 他のラベルがこのラベルにドラッグアンドドロップされます
ドラッグエンド ドラッグアンドドロップ操作が終了します
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<script type="text/javascript">
function init()
{
// (1) 拖放开始
source.addEventListener("dragstart", function(ev)
{
//(1) 向dataTransfer对象追加数据
var dt = ev.dataTransfer;
dt.effectAllowed = 'all';
//(2) 拖动元素为dt.setData("text/plain", this.id);
dt.setData("text/plain", "你好");
}, false);
// (3) dragend：拖放结束
dest.addEventListener("dragend", function(ev)
{
//不执行默认处理（拒绝被拖放）
ev.preventDefault();
}, false);
// (4) drop:被拖放
dest.addEventListener("drop", function(ev)
{
// 从DataTransfer对象那里取得数据
var dt = ev.dataTransfer;
//(5) 不执行默认处理（拒绝被拖放）
ev.preventDefault();
//停止事件传播
ev.stopPropagation();
}, false);
}
</script>
</head>
<body onload="init()">
<h5>请拖放</h5>
</html>上記のコードでは、ページが読み込まれるときに inint() イベントが自動的にトリガーされます。このイベントには、ドラッグの開始、ドラッグ アンド ドロップされる、ドラッグの終了という 3 つの機能が含まれます。ブラウザで Web ページを開き、マウスをドラッグして Web ページに夜の写真を表示すると、Web ページに必要なコンテンツが自動的に読み込まれます。
【関連おすすめ】
1.
無料のh5オンラインビデオチュートリアルphp.cnオリジナルのhtml5ビデオチュートリアル以上がHTML5 でドラッグ アンド ドロップを実装するためのサンプル コードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。