의견 : HTML5 이전에 웹 페이지 요소의 드래그 앤 드롭 작업을 구현하려면 많은 양의 JS 코드를 통해이를 구현하려면 Mousedown, MouseMove, MouseUp 및 기타 API에 의존해야했습니다. 이제 HTML5는 웹 페이지 요소의 드래그 앤 드롭 작업의 어려움을 크게 단순화합니다. 브라우저 내부의 요소 드래그 앤 드롭을 지원하는 것 외에도 API는 브라우저와 다른 응용 프로그램간에 데이터를 드래그하는 것을 지원합니다.
HTML5 전에 웹 페이지 요소의 드래그 앤 드롭 작업을 구현하려면 Mousedown, MouseMove, MouseUp 및 기타 API에 의존하여 많은 양의 JS 코드를 통해이를 구현해야합니다. HTML5는 드래그 앤 드롭 작업을 직접 지원하는 API를 도입하여 웹 페이지 요소의 드래그 앤 드롭 작업을 프로그래밍하는 데 어려움을 크게 단순화합니다. 브라우저 내부의 요소 드래그 앤 드롭을 지원하는 것 외에도이 API는 브라우저와 다른 응용 프로그램 간의 데이터 드래그를 지원합니다.
이 기사는 간단한 예제를 사용하여 HTML5에서 드래그 앤 드롭 API를 사용하는 방법을 보여줍니다.
장면:
아래 그림과 같이, 우리는 다음을 구현하려고합니다.
왼쪽 앨범 영역에서 사진을 드래그하고 떨어 뜨려 오른쪽 쓰레기통 영역으로 드래그하십시오. 드래그 과정에서 따뜻한 알림 부분을 즉시 상기시켜야하며 드래그 앤 드롭 작업이 현재 수행되고 있습니다.
구현 방법 :
위의 인터페이스에 표시된 것처럼 HTML 코드는 다음과 같이 비교적 간단합니다.
<! doctype html>
<html>
<헤드>
<title> html5는 드래그 앤 드롭 작동을 구현합니다 </title>
<meta charset = "utf-8"/>
<스타일>
.앨범
{
테두리 : 3px 점선 #CCC;
플로트 : 왼쪽;
여백 : 10px;
Min-Height : 100px;
패딩 : 10px;
너비 : 220px;
}
</스타일>
</head>
<바디 ">
<div>
<H2> 따뜻한 알림 : 사진을 쓰레기통으로 직접 드래그 할 수 있습니다 </h2>
</div>
<div>
<H2> 앨범 </h2>
<img draggable = "true"src = "img /bg_01.png" />
<img draggable = "true"src = "img /bg_02.png" />
<img draggable = "true"src = "img /bg_03.png" />
</div>
<div>
<H2> 쓰레기통 </h2>
</div>
<br/>
</body>
</html>
참고 : 드래그 앤 드롭 작업을 구현하려면 드래그 및 드롭 할 요소에 Draggable = True 속성을 추가해야합니다.
다음으로 다음 JS 코드를 Onload 이벤트에 추가하십시오. 의견은 더 자세하고 별도로 설명되지 않습니다.
<cript>
함수 init () {
var info = document.getElementById ( "Info");
// 드래그 앤 드롭 요소를 가져옵니다. 이 예는 앨범이있는 DIV입니다.
var src = document.getElementById ( "앨범");
// 드래그 앤 드롭 작동을 시작합니다
src.ondragstart = function (e) {
// 드래그 앤 드롭 사진을 얻습니다
var dragimgid = e.target.id;
// 드래그 된 요소를 얻습니다
var dragimg = document.getElementById (dragimgid);
// 드래그 앤 드롭 작동이 종료됩니다
dragimg.ondragend = function (e) {
// 알림 메시지를 복구합니다
info.innerhtml = "<h2> 크리에이티브 리마인더 : 사진을 쓰레기통으로 직접 드래그 할 수 있습니다 </h2>";
};
e.datatransfer.setData ( "text", dragimgid);
};
// 드래그 앤 드롭 프로세스
src.ondrag = function (e) {
info.innerhtml = "<h2>-사진이 드래그 중입니다-</h2>";
}
// 드래그 앤 드롭 대상 요소를 얻습니다
var target = document.getElementById ( "쓰레기");
// 기본 처리를 닫습니다.
target.ondragenter = function (e) {
e.preventDefault ();
}
target.ondRagover = function (e) {
e.preventDefault ();
}
// 대상 요소로 드래그하고 떨어집니다
target.ondRop = function (e) {
var draggedid = e.datatransfer.getData ( "text");
// 앨범에서 DOM 객체를 가져옵니다
var oldelem = document.getElementById (draggedid);
// 앨범 div에서 사진 노드 삭제
Oldelem.parentNode.removeChild (Oldelem);
// 드래그 된 사진 DOM 노드를 쓰레기 DIV에 추가합니다.
Target.appendChild (Oldelem);
info.innerhtml = "<h2> 크리에이티브 리마인더 : 사진을 쓰레기통으로 직접 드래그 할 수 있습니다 </h2>";
e.preventDefault ();
}
}
</스크립트>
효과를 실현하십시오 :