ドラッグ アンド ドロップ
ドラッグ アンド ドロップは、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。
HTML5 ではドラッグ アンド ドロップが標準の一部であり、あらゆる要素をドラッグ アンド ドロップできます。
1. HTML5 ドラッグ アンド ドロップ
ドラッグ アンド ドロップ (ドラッグ アンド ドロップ) は HTML5 標準の一部です。
2. ドラッグスタート
ondragstart: ドラッグしたデータを指定する関数drag(イベント)を呼び出します
3. ドラッグしたデータを設定します
setData(): ドラッグしたデータを設定しますデータの値。
4. 配置
ondragover: イベントは、ドラッグされたデータを配置する場所を指定します。
5. 配置
ondrop: ドラッグされたデータが配置されると、ドロップイベントが発生します
概要:
ドラッグターゲット (ソース要素) でイベントをトリガーします:
ondragstart: ユーザーがドラッグを開始しますelement トリガーされるタイミング
ondrag: 要素がドラッグされているときにトリガーされる
ondragend: ユーザーが要素のドラッグを完了した後にトリガーされる
ターゲットが解放されたときにトリガーされるイベント
ondragenter: このイベントは、マウスでドラッグされたオブジェクトがそのコンテナーのスコープに入ったときにトリガーされます
ondragover: このイベントは、ドラッグされたオブジェクトが別のオブジェクトのコンテナーのスコープ内にドラッグされたときにトリガーされます
ondragleave: このイベントは、マウスでドラッグされたオブジェクトがコンテナのスコープから出るときにトリガーされます
ondrop: このイベントは、ドラッグ プロセス中にマウス ボタンが放されたときにトリガーされます
ドラッグ アンド ドロップ インスタンス:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drop</title>
<style>
.box{
width: 400px;
height: 400px;
}
#box1{
float: left;
background-color: #CCCCCC;
}
#box2{
float: left;
background-color: aqua;
}
</style>
<script> var box1Div, msgDiv, img1, box2Dib;
window.onload = function () {
box1Div = document.getElementById("box1");
msgDiv = document.getElementById("msg");
img1 = document.getElementById("img1");
box2Div = document.getElementById("box2");
box1Div.ondragover = function (e) {
e.preventDefault();
}
box2Div.ondragover = function (e) {
e.preventDefault();
}
img1.ondragstart = function (e) {
e.dataTransfer.setData("imgId","img1");
}
box1Div.ondrop = dropImghandler;
box2Div.ondrop = dropImghandler;
function dropImghandler(e) {
//创建节点
var img = document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
}
function showObj(obj) {
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>";
}
msgDiv.innerHTML = s;
}</script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt="">
<div id="msg"></div>
</body>
</html>
次のセクション