드래그 앤 드롭
드래그 앤 드롭은 개체를 잡고 나중에 다른 위치로 드래그하는 일반적인 기능입니다.
HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 드래그 앤 드롭할 수 있습니다.
1. HTML5 드래그 앤 드롭
드래그 앤 드롭(Drag and drop)은 HTML5 표준의 일부입니다.
2. 드래그 시작
ondragstart: 드래그된 데이터를 지정하는 드래그(이벤트) 함수가 호출됩니다
3. 드래그 데이터 설정
setData(): 드래그된 데이터의 데이터 유형과 값을 설정합니다.
4. 배치
ondragover: 이벤트는 드래그된 데이터를 배치할 위치를 지정합니다.
5. 배치
ondrop: 드래그 앤 드롭한 데이터를 배치하면 drop 이벤트가 발생합니다.
요약:
ondrop 이벤트가 드래그 대상(소스 요소)에서 트리거됨:
ondragstart: 사용자가 요소 드래그를 시작할 때 트리거됨
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>