이 기사의 내용은 HTML5/"> HTML5에서 HTML 요소 드래그 기능을 구현하는 방법에 관한 것입니다. HTML5 전에 드래그 앤 드롭을 구현하려면 JS를 사용해야합니다. 이제 HTML5는 내부적으로 드래그 앤 드롭 기능을 지원하지만 약간 더 복잡한 기능을 구현하려면 JS가 필요하지 않습니다.
1. 드래그 객체를 만듭니다드래그 앤 드롭 함수를 구현 해야하는 요소가 드래그 가능한 속성을 통해 브라우저를 알 수 있습니다. Draggable은 세 가지 값을 가지고 있습니다. true : 요소를 드래그 할 수 있습니다. 거짓 : 요소를 드래그 할 수 없습니다. 자동 : 브라우저는 요소가 자체적으로 드래그 할 수 있는지 여부를 결정합니다.
시스템의 기본값은 자동이지만 브라우저는 AUTO의 경우 다른 요소의 다른 드래그 앤 드롭 함수를 지원합니다. IMG 객체를 지원하지만 DIV 객체를 지원하지 않습니다. 따라서 요소를 드래그 해야하는 경우 Draggale을 True로 설정하는 것이 가장 좋습니다. 아래 예를 살펴 보겠습니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
<스타일>
#src> *
{
플로트 : 왼쪽;
}
#TARGET, #SRC> IMG
{
테두리 : 얇은 단단한 검은 색;
패딩 : 2px;
마진 : 4px;
}
#목표
{
높이 : 123px;
너비 : 220px;
텍스트 정렬 : 센터;
디스플레이 : 테이블;
}
#TARGET> p
{
디스플레이 : 테이블 세포;
수직 정상 : 중간;
}
#TARGET> IMG
{
마진 : 1px;
}
</스타일>
</head>
<body>
<div id = "src">
<img draggable = "true"id = "car1"src = "img /1.jpg" />
<img draggable = "true"id = "car2"src = "img /2.jpg" />
<img draggable = "true"id = "car3"src = "img /3.jpg" />
<div id = "대상">
<p id = "msg">
여기에 떨어 뜨립니다 </p>
</div>
</div>
<cript>
var src = document.getElementById ( "SRC");
var target = document.getElementById ( "대상");
</스크립트>
</body>
</html>
실행 효과 :
2. 드래그 앤 드롭 이벤트를 처리하십시오이제 드래그와 관련된 이벤트를 이해해 봅시다. 두 가지 유형의 이벤트가 있습니다. 하나는 드래그 객체의 이벤트이고 다른 하나는 드롭 영역의 이벤트입니다. 드래그 이벤트는 다음이 포함됩니다 : DragStart : 요소 드래그가 시작될 때 트리거; 드래그 : 요소 드래그 중에 트리거; 드래그 : 요소 드래그가 끝날 때 트리거되었습니다. 아래 예를 들어 봅시다 :
<! doctype html>
<html>
<헤드>
<title> 예 </title>
<스타일>
#src> *
{
플로트 : 왼쪽;
}
#TARGET, #SRC> IMG
{
테두리 : 얇은 단단한 검은 색;
패딩 : 2px;
마진 : 4px;
}
#목표
{
높이 : 123px;
너비 : 220px;
텍스트 정렬 : 센터;
디스플레이 : 테이블;
}
#TARGET> p
{
디스플레이 : 테이블 세포;
수직 정상 : 중간;
}
#TARGET> IMG
{
마진 : 1px;
}
img.dragged
{
배경색 : 오렌지;
}
</스타일>
</head>
<body>
<div id = "src">
<img draggable = "true"id = "car1"src = "img /1.jpg" />
<img draggable = "true"id = "car2"src = "img /2.jpg" />
<img draggable = "true"id = "car3"src = "img /3.jpg" />
<div id = "대상">
<p id = "msg">
여기에 떨어 뜨립니다 </p>
</div>
</div>
<cript>
var src = document.getElementById ( "SRC");
var target = document.getElementById ( "대상");
var msg = document.getElementById ( "msg");
src.ondragstart = function (e) {
e.target.classlist.add ( "draged");
}
src.ondragend = function (e) {
e.target.classlist.remove ( "드래그");
msg.innerhtml = "여기 드롭";
}
src.ondrag = function (e) {
msg.innerhtml = e.target.id;
}
</스크립트>
</body>
</html>
실행 효과 :
3. 배달 영역을 만듭니다전달 영역과 관련된 이벤트를 살펴 보겠습니다. Dragenter : 드래그 객체가 전달 영역에 들어갈 때 트리거; 드래그 오버 : 드래그 객체가 전달 영역에서 움직일 때 트리거되었습니다. 드래그 리브 : 드래그 객체는 전달 영역으로 전달되지 않으며 전달 영역을 떠날 때 트리거됩니다. 드롭 : 드래그 객체가 전달 영역에 배치 될 때 트리거되었습니다.
예를 살펴 보겠습니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
<스타일>
#src> *
{
플로트 : 왼쪽;
}
#TARGET, #SRC> IMG
{
테두리 : 얇은 단단한 검은 색;
패딩 : 2px;
마진 : 4px;
}
#목표
{
높이 : 123px;
너비 : 220px;
텍스트 정렬 : 센터;
디스플레이 : 테이블;
}
#TARGET> p
{
디스플레이 : 테이블 세포;
수직 정상 : 중간;
}
#TARGET> IMG
{
마진 : 1px;
}
img.dragged
{
배경색 : Lightgrey;
}
</스타일>
</head>
<body>
<div id = "src">
<img draggable = "true"id = "car1"src = "img /1.jpg" />
<img draggable = "true"id = "car2"src = "img /2.jpg" />
<img draggable = "true"id = "car3"src = "img /3.jpg" />
<div id = "대상">
<p id = "msg">
여기에 떨어 뜨립니다 </p>
</div>
</div>
<cript>
var src = document.getElementById ( "SRC");
var target = document.getElementById ( "대상");
var msg = document.getElementById ( "msg");
var draggedid;
target.ondragenter = HandledRag;
target.ondRagover = HandledRag;
함수 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 ( "draged");
}
src.ondragend = function (e) {
var elems = document.querySelectorall ( ". 드래그");
for (var i = 0; i <elems.length; i ++) {
Elems [i] .classlist.remove ( "Draged");
}
}
</스크립트>
</body>
</html>
실행 결과 :
4. Datatransfer를 사용하십시오Datatransfer를 사용하여 드래그 객체에서 전달 영역으로 데이터를 전달합니다. Datatransfer는 다음과 같은 속성과 방법을 가지고 있습니다. 유형 : 데이터 형식을 반환합니다. getData (<format>) : 지정된 형식 데이터를 반환합니다. setData (<format>, <data>) : 지정된 형식 데이터를 설정합니다. ClearData (<format>) : 지정된 형식 데이터를 제거합니다. 파일 : 전달 된 파일 배열을 반환합니다.
다음 예를 살펴 보겠습니다. 달성 한 효과는 예 3과 동일합니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
<스타일>
#src> *
{
플로트 : 왼쪽;
}
#SRC> IMG
{
테두리 : 얇은 단단한 검은 색;
패딩 : 2px;
마진 : 4px;
}
#목표
{
테두리 : 얇은 단단한 검은 색;
마진 : 4px;
}
#목표
{
높이 : 123px;
너비 : 220px;
텍스트 정렬 : 센터;
디스플레이 : 테이블;
}
#TARGET> p
{
디스플레이 : 테이블 세포;
수직 정상 : 중간;
}
img.dragged
{
배경색 : 오렌지;
}
</스타일>
</head>
<body>
<div id = "src">
<img draggable = "true"id = "car1"src = "img /1.jpg" />
<img draggable = "true"id = "car2"src = "img /2.jpg" />
<img draggable = "true"id = "car3"src = "img /3.jpg" />
<div id = "대상">
<p id = "msg">
여기에 떨어 뜨립니다 </p>
</div>
</div>
<cript>
var src = document.getElementById ( "SRC");
var target = document.getElementById ( "대상");
target.ondragenter = HandledRag;
target.ondRagover = HandledRag;
함수 handledrag (e) {
e.preventDefault ();
}
target.ondRop = function (e) {
var dropedid = 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 ( "draged");
}
src.ondragend = function (e) {
var elems = document.querySelectorall ( ". 드래그");
for (var i = 0; i <elems.length; i ++) {
Elems [i] .classlist.remove ( "Draged");
}
}
</스크립트>
</body>
</html>
5. 파일을 드래그하고 떨어 뜨립니다HTML5는 파일 API를 지원하여 로컬 파일을 조작 할 수 있습니다. 일반적으로 파일 API를 직접 사용하지 않습니다. 다음 예에서 볼 수 있듯이 드래그 앤 드롭 효과 결합과 같은 다른 기능과 함께 사용할 수 있습니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
<스타일>
몸> *
{
플로트 : 왼쪽;
}
#목표
{
국경 : 중간 더블 블랙;
마진 : 4px;
높이 : 75px;
너비 : 200px;
텍스트 정렬 : 센터;
디스플레이 : 테이블;
}
#TARGET> p
{
디스플레이 : 테이블 세포;
수직 정상 : 중간;
}
테이블
{
마진 : 4px;
국경-콜라스 : 붕괴;
}
TH, TD
{
패딩 : 4px;
}
</스타일>
</head>
<body>
<div id = "대상">
<p id = "msg">
여기에 파일을 삭제 </p>
</div>
<table id = "data">
</테이블>
<cript>
var target = document.getElementById ( "대상");
target.ondragenter = HandledRag;
target.ondRagover = HandledRag;
함수 handledrag (e) {
e.preventDefault ();
}
target.ondRop = function (e) {
var files = e.datatransfer.files;
var tableelem = document.getElementById ( "data");
TableElem.innerhtml = "<tr> <th> name </th> <th> type </th> <th> size </th> </tr>";
for (var i = 0; i <files.length; i ++) {
var row = "<tr> <td>" + 파일 [i] .name + "</td> <td>" + 파일 [i] .type + "</td> <td>" + 파일 [i] .Size + "</td> </tr>";
tableelem.innerhtml += 행;
}
e.preventDefault ();
}
</스크립트>
</body>
</html>
Datatransfer 파일 배열 객체로 취급 할 수있는 filelist 객체를 반환하고 파일에는 다음 속성이 포함되어 있습니다. 이름 : 파일 이름; 유형 : 파일 유형 (Mime Type); 크기 : 파일 크기.
실행 효과 :
6. 파일 업로드다음은 Ajax를 드래그하고 삭제하여 파일 업로드의 예입니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
<스타일>
.테이블
{
디스플레이 : 테이블;
}
.열
{
디스플레이 : 테이블 행;
}
.셀
{
디스플레이 : 테이블 세포;
패딩 : 5px;
}
.상표
{
텍스트 정렬 : 맞습니다.
}
#목표
{
국경 : 중간 더블 블랙;
마진 : 4px;
높이 : 50px;
너비 : 200px;
텍스트 정렬 : 센터;
디스플레이 : 테이블;
}
#TARGET> p
{
디스플레이 : 테이블 세포;
수직 정상 : 중간;
}
</스타일>
</head>
<body>
<form id = "fruitform"method = "post"action = "/uploadhandler.ashx">
<div>
<div>
<div>
바나나 : </div>
<div>
<입력 이름 = "바나나"value = "2" /> < /div>
</div>
<div>
<div>
사과 : </div>
<div>
<입력 이름 = "사과"value = "5" /> < /div>
</div>
<div>
<div>
체리 : </div>
<div>
<입력 이름 = "체리"value = "20" /> < /div>
</div>
<div>
<div>
파일 : </div>
<div>
<입력 유형 = "파일"이름 = "파일" /> < /div>
</div>
<div>
<div>
총 : </div>
<div id = "results">
품목 </div>
</div>
</div>
<div id = "대상">
<p id = "msg">
여기에 파일을 삭제 </p>
</div>
<button id = "제출"유형 = "제출">
양식을 제출하십시오 </button>
</form>
<script type = "text/javaScript">
var target = document.getElementById ( "대상");
var httprequest;
var filelist;
target.ondragenter = HandledRag;
target.ondRagover = HandledRag;
함수 handledrag (e) {
e.preventDefault ();
}
target.ondRop = function (e) {
filelist = e.datatransfer.files;
e.preventDefault ();
}
document.getElementById ( "제출"). onclick = 함수 handlebuttonpress (e) {
e.preventDefault ();
var form = document.getElementById ( "fruitform");
var formdata = 새로운 formdata (form);
if (filleList) {
for (var i = 0; i <fileList.length; i ++) {
formdata.append ( "파일" + i, filleList [i]);
}
}
httprequest = new xmlhttprequest ();
httprequest.onreadyStateChange = handlerPonse;
httprequest.open ( "post", form.action);
httprequest.send (formdata);
}
함수 handlerSponse () {
if (httprequest.readystate == 4 && httprequest.status == 200) {
var data = json.parse (httprequest.responsetext);
document.getElementById ( "results"). innerHtml = "당신은" + data.total + "항목을 주문했습니다.
}
}
</스크립트>
</body>
</html>
효과:
위의 예 중 일부는 다른 브라우저가 실행되는 효과가있을 수 있습니다. 크롬 브라우저를 사용하고 있습니다. 여러 파일을 지원하지 않는 예제 5 및 6을 제외하고 다른 예제는 정상적으로 실행됩니다. 데모를 다운로드 할 수 있습니다.
데모 다운로드 주소 : html5guide.draggable.rar