html5의 드래그 앤 드롭 샘플 코드에 대한 자세한 소개
- 黄舟원래의
- 2017-03-15 15:42:471461검색
1) 소스 프로젝트 생성
1.1) draggable 속성 값:
true — — 이 요소는 드래그할 수 있습니다.
false — 이 요소는 드래그할 수 없습니다.
브라우저는 요소를 독립적으로 결정할 수 있습니다.
1.2) 드래그된 요소의 이벤트:
드래그 시작 — — 요소가
드래그 — 요소를 드래그할 때 반복적으로 트리거됩니다.
드래그2) 릴리스 영역 생성2.1) 릴리스 영역 이벤트:
dragenter - 드래그된 요소가 릴리스 영역이 차지하는 화면 공간에 들어갈 때 트리거됩니다.
dragover - 드래그된 요소가 릴리스 영역이 차지하는 화면 공간에 들어갈 때 트리거됩니다. 릴리스 영역 내에서 이동할 때 트리거됩니다.
드래그한 요소가 배치되지 않고 릴리스 영역을 벗어날 때 트리거됩니다. 드래그한 요소가 릴리스 영역에 놓였을 때
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > * {float:left;}
#src > img {border: thin solid black; padding: 2px; margin:4px;}
#target {border: thin solid black; margin:4px;}
#target { height: 81px; width: 81px; text-align: center; display: table;}
#target > p {display: table-cell; vertical-align: middle;}
img.dragged {background-color: lightgrey;}
</style>
</head>
<body>
<p id="src">
<img draggable="true" id="banana" src="banana100.png" alt="banana"/>
<img draggable="true" id="apple" src="apple100.png" alt="apple"/>
<img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
<p id="target">
<p id="msg">Drop Here</p>
</p>
</p>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
var msg = document.getElementById("msg");
var draggedID;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function(e) {
var newElem = document.getElementById(draggedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function(e) {
draggedID = e.target.id;
e.target.classList.add("dragged");
}
src.ondragend = function(e) {
var elems = document.querySelectorAll(".dragged");
for (var i = 0; i < elems.length; i++) {
elems[i].classList.remove("dragged");
}
}
</script>
</body>
</html>3) DataTransfer
3.1) 드래그 앤 드롭 동작에 의해 발생된 이벤트와 동시에 전달되는 객체는 MouseEvent에서 파생된 DragEvent입니다. DragEvent 객체에 의해 정의된 추가 속성:
dataTransfer - 데이터를 릴리스 영역(DataTransfer)으로 전송하는 데 사용되는 객체를 반환합니다. 🎜 >
3.2)
DataTransfer 객체에 의해 정의된 속성:
유형 - 반환된 데이터의 형식 getData(0313a12b65aa20a048ec62b8cf470fd2) ——지정된 형식의 데이터를 반환합니다.
set
Data(0313a12b65aa20a048ec62b8cf470fd2 ,
clearData(0313a12b65aa20a048ec62b8cf470fd2)——지정된 형식의 데이터를 제거합니다. format;
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > * {float:left;}
#src > img {border: thin solid black; padding: 2px; margin:4px;}
#target {border: thin solid black; margin:4px;}
#target { height: 81px; width: 81px; text-align: center; display: table;}
#target > p {display: table-cell; vertical-align: middle;}
img.dragged {background-color: lightgrey;}
</style>
</head>
<body>
<p id="src">
<img draggable="true" id="banana" src="banana100.png" alt="banana"/>
<img draggable="true" id="apple" src="apple100.png" alt="apple"/>
<img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
<p id="target">
<p id="msg">Drop Here</p>
</p>
</p>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function(e) {
var droppedID = e.dataTransfer.getData("Text");
var newElem = document.getElementById(droppedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function(e) {
e.dataTransfer.setData("Text", e.target.id);
e.target.classList.add("dragged");
}
src.ondragend = function(e) {
var elems = document.querySelectorAll(".dragged");
for (var i = 0; i < elems.length; i++) {
elems[i].classList.remove("dragged");
}
}
</script>
</body>
</html> 3.3) 파일 끌어서 놓기:
에 의해 정의된 속성 - 파일 이름을 가져옵니다. >
유형 - MIME 유형으로 표시되는 파일 유형을 가져옵니다.
크기 - 파일 크기(바이트)를 가져옵니다. >
아아아아
위 내용은 html5의 드래그 앤 드롭 샘플 코드에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!