정의:
드래그 앤 드롭은 개체를 잡고 나중에 다른 위치로 드래그하는 일반적인 기능입니다.
HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 드래그 앤 드롭할 수 있습니다.
1. "드래그 앤 드롭 이벤트"에 대해 이야기해 보세요.
드래그 앤 드롭 이벤트, 즉 개체를 잡고 드래그하는 것입니다. 다른 위치로
일부 이벤트는 드래그 앤 드롭되는 요소에서 트리거되고 일부 이벤트는 드롭 대상에서 트리거됩니다. 요소가 드래그되면 dragstart 이벤트, drag 이벤트 및 dragend 이벤트가 순차적으로 트리거됩니다. 요소가 유효한 드롭 대상으로 드래그되면 dragenter 이벤트, dragover 이벤트, dragleave 또는 drop 이벤트가 순차적으로 트리거됩니다.
2. 구현 과정
요소를 드래그 가능으로 설정
<img draggable="true "> ;
무엇을 드래그할까요? 요소를 드래그하면 이벤트가 발생합니다(ondragstart 및 setData())
ondragstart 속성은 함수를 호출하고, drag(event)는 드래그된 데이터를 보도록 지정하고, dataTransfer.setData()는 드래그 앤 드롭을 설정합니다. 데이터 데이터의 유형과 값.
함수 드래그(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
어디에 놓을까요? ondragover 이벤트는 드래그된 데이터를 배치할 위치를 지정합니다.
기본적으로 데이터/요소는 다른 요소에 배치될 수 없습니다. 배치를 허용하려면 요소의 기본 처리를 방지해야 합니다. 따라서 ondrop은 ondragover 이벤트
event.preventDefault()
의 event.preventDefault() 메소드를 통해 배치해야 합니다. 먼저 PreventDefault()를 호출합니다. 브라우저의 기본 데이터 처리를 방지하려면 dataTransfer.getData("Text") 메소드를 통해 드래그된 데이터를 얻으십시오. 마지막으로 드래그된 요소는 배치된 요소에 추가됩니다.
함수 삭제(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
방금 ondragstart와 같은 몇 가지 새로운 속성 용어를 보았습니다. 아직 낯설고 왜인지는 모르겠지만 아래 표를 보면 이해가 될 것입니다.
드래그 라이프 사이클 속성 값 설명
드래그 시작 ondragstart 스크립트 in 드래그 작업이 시작될 때 스크립트 실행(오브젝트는 드래그된 요소입니다)
드래그 프로세스 중 ondrag 스크립트 스크립트가 드래그되는 동안 스크립트가 허용됩니다(오브젝트는 드래그된 요소입니다). 드래그된 요소)
드래그 프로세스 중 ondragenter 스크립트 요소가 적합한 배치 대상으로 드래그되면 스크립트를 실행합니다(오브젝트가 대상 요소임)
드래그 프로세스 중 ondragover 스크립트 요소가 올바른 배치 대상에 드래그되는 한 스크립트를 실행합니다(객체가 대상 요소입니다)
드래그 프로세스 중 ondragleave 스크립트 요소가 올바른 배치 대상을 벗어날 때(객체가 대상입니다) 요소)
드래그 종료 시 드롭 스크립트가 드래그됩니다. 드래그된 요소가 대상 요소에 배치될 때 스크립트를 실행합니다. (오브젝트가 대상 요소입니다.)
드래그 종료 Ondragend 스크립트 다음 경우에 스크립트를 실행합니다. 드래그 작업이 종료됩니다(객체는 드래그된 요소입니다)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#divDrag{width:200px;height:20px;margin:10px;border:2px solid #111;}
#divArea{width:300px;margin:10px 0;height:300px;border:2px solid #ddd;}
#divTips{width:300px;background-color:#eee;}
</style>
<script type="text/javascript">
function getThisId(id){ return document.getElementById(id);}
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){element.addEventListener(type,handler,false);}
else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){element.removeEventListener(type,handler,false);}
else if(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}
},
getEvent:function(event){
return event? event:window.event; /*获取事件对象*/
},
getTarget:function(event){
return event.target||event.srcElement; /*获取目标元素*/
},
preventDefault:function(event){ /*取消事件的默认设置*/
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ /*取消事件冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
window.onload = function(){
var Drag = getThisId("divDrag");
var Area = getThisId("divArea");
var objImg = document.createElement("img");
objImg.src = "l.jpg"
EventUtil.addHandler(Drag,"dragstart",function(e){
var objDtf = e.dataTransfer;
objDtf.setData("text",EventUtil.getTarget(e).id);
objDtf.setDragImage(objImg,0,0);
});
EventUtil.addHandler(Area,"dragover",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
});
EventUtil.addHandler(Area,"drop",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
var objDtf = e.dataTransfer;
var strHTML = objDtf.getData("text");
var replacediv=getThisId(strHTML).cloneNode(false);
EventUtil.getTarget(e).appendChild(replacediv);
});
}
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body>
<div id="divFrame">
<div class="wPub" id="dddd">
<img id="divDrag" draggable="true" src="http://e.hiphotos.baidu.com/image/pic/item/f3d3572c11dfa9ec2eece15e61d0f703908fc1bd.jpg">
</div>
<div id="divArea"></div>
</div>
</body>
</html>