HTML5 드래그 앤 드롭
드래그 앤 드롭
드래그 앤 드롭은 개체를 잡고 나중에 다른 위치로 드래그하는 일반적인 기능입니다.
HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 드래그 앤 드롭할 수 있습니다.
관련 예:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html5 drag & drop 拖拽与拖放测试</title>
<style>
body{font-size:84%;}
.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
.dragbox{width:500px; padding-left:20px; float:left;}
.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;}
</style>
</head>
<body>
<div class="dustbin"><br>垃<br>圾<br>箱</div>
<div class="dragbox">
<div class="draglist" title="拖拽我" draggable="true">列表1</div>
<div class="draglist" title="拖拽我" draggable="true">列表2</div>
<div class="draglist" title="拖拽我" draggable="true">列表3</div>
<div class="draglist" title="拖拽我" draggable="true">列表4</div>
<div class="draglist" title="拖拽我" draggable="true">列表5</div>
<div class="draglist" title="拖拽我" draggable="true">列表6</div>
</div>
<div class="dragremind"></div>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script>
var $ = function(selector) {
if (!selector) { return []; }
var arrEle = [];
if (document.querySelectorAll) {
arrEle = document.querySelectorAll(selector);
} else {
var oAll = document.getElementsByTagName("div"), lAll = oAll.length;
if (lAll) {
var i = 0;
for (i; i<lAll; i+=1) {
if (/^\./.test(selector)) {
if (oAll[i].className === selector.replace(".", "")) {
arrEle.push(oAll[i]);
}
} else if(/^#/.test(selector)) {
if (oAll[i].id === selector.replace("#", "")) {
arrEle.push(oAll[i]);
}
}
}
}
}
return arrEle;
};
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
eleDrags[i].onselectstart = function() {
return false;
};
eleDrags[i].ondragstart = function(ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0, 0);
eleDrag = ev.target;
return true;
};
eleDrags[i].ondragend = function(ev) {
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
}
eleDustbin.ondragover = function(ev) {
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) {
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11205167-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>요소를 드래그 가능으로 설정
먼저 요소를 드래그 가능하게 만들려면 draggable 속성을 true로 설정하세요.
<img draggable="true">
드래그할 항목 - ondragstart 및 setData()
그런 다음 요소를 드래그할 때 어떤 일이 발생하는지 지정합니다.
위의 예에서 ondragstart 속성은 드래그할 데이터를 지정하는 drag(event) 함수를 호출합니다.
dataTransfer.setData() 메소드는 드래그된 데이터의 데이터 유형과 값을 설정합니다.
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}이 예에서 데이터 유형은 "Text"이고 값은 드래그 가능한 데이터의 ID입니다. 요소("드래그1").
위치 위치 - ondragover
ondragover 이벤트는 드래그된 데이터를 위치할 위치를 지정합니다.
기본적으로 데이터/요소는 다른 요소 안에 배치될 수 없습니다. 배치를 허용해야 하는 경우 요소의 기본 처리를 방지해야 합니다.
ondragover 이벤트의 event.preventDefault() 메소드를 호출하여 배치됩니다.
event.preventDefault()
- ondrop
드래그된 데이터를 드롭하면 드롭 이벤트가 발생합니다.
위 예에서 ondrop 속성은 함수 drop(event)를 호출합니다.
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}코드 설명:
preventDefault()를 호출하여 브라우저가 data 기본 처리(드롭 이벤트의 기본 동작은 링크로 열리는 것임)
dataTransfer.getData("Text") 메소드를 통해 드래그된 데이터를 가져옵니다. 이 메소드는 setData() 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다.
드래그된 데이터는 드래그된 요소의 ID("drag1")입니다
드래그된 요소를 배치된 요소(대상 요소)에 추가
관련 지식 요약 :
DataTransfer 개체: 드롭 개체를 전송하는 데 사용되는 매체, 일반적으로 Event.dataTransfer입니다.
draggable 속성: 레이블 요소는 draggable=true로 설정되어야 합니다. 그렇지 않으면 아무런 효과가 없습니다. 예:
<div title="Drag me" draggable="true"> ; 목록 1</div>
ondragstart 이벤트: 드래그된 요소가 드래그되기 시작할 때 발생하는 이벤트입니다. 이 이벤트는 드래그된 요소에 작용합니다.
ondragenter 이벤트: 드래그된 요소가 대상 요소에 들어갈 때 드래그 요소가 대상 요소에서 움직일 때 이벤트가 발생합니다.
ondragover 이벤트: 드래그 요소가 대상 요소에서 움직일 때 이벤트가 발생합니다.
ondrop 이벤트: 드래그된 요소가 대상 요소에 있는 동시에 마우스를 놓을 때 발생하는 이벤트입니다. 이 이벤트는 대상 요소에 작용합니다.
ondragend 이벤트: 이벤트는 다음과 같습니다. 드래그가 완료되면 트리거됩니다. 이 이벤트는 드래그된 요소에 작용합니다. 요소의
Event.preventDefault() 메서드는 일부 기본 이벤트 메서드의 실행을 방지합니다. PreventDefault()는 ondragover에서 실행되어야 합니다. 그렇지 않으면 ondrop 이벤트가 트리거되지 않습니다. 또한, 다른 애플리케이션이나 파일, 특히 사진에서 무언가를 드래그하는 경우 기본 동작은 사진이나 관련 정보를 표시하는 것이며 실제로 드롭을 실행하지는 않습니다. 이때 문서를 직접 종료하려면 문서의 ondragover 이벤트를 사용해야 합니다.
Event. effectAllowed 속성: 드래그 효과입니다.
