드래그/드롭은 매우 일반적인 기능입니다. 물건을 잡고 배치하려는 영역으로 끌 수 있습니다. 많은 Javascripts는 jqueryui의 Draganddrop 구성 요소와 같은 관련 기능을 유사하게 구현합니다. HTML5에서 드래그 드롭은 표준 작업이되고 모든 요소가 지원됩니다. 이 기능은 매우 일반적이므로 모든 주류 브라우저 가이 작업을 지원합니다.
드래그-래그가 가능한 속성을 활성화하십시오매우 간단합니다. 요소의 드래그 속성을 드래그 가능하게 수정하면이 요소는 다음과 같이 드래그를 지원합니다.
<imgdraggable = "true"/>
드래그하는 동안 데이터를 전달합니다드래그 프로세스 중에는 전환 프로세스를 완료하기 위해 해당 논리 데이터를 전달해야합니다. 여기서 우리는 주로 데이터 전송에 datatransfer 객체를 사용합니다. 먼저 회원을 살펴 보겠습니다.
메소드 멤버 :
setData (형식, 데이터) : 드래그 된 데이터를 datatransfer 객체에 할당합니다.
형식 : 드래그되는 데이터 유형을 지정하는 문자열 매개 변수입니다. 이 매개 변수의 값은 텍스트 (텍스트 유형) 및 URL (URL 유형) 일 수 있습니다. 이 매개 변수는 사례 독립적이므로 텍스트는 텍스트와 동일합니다.
데이터 : 드래그중인 데이터를 지정하는 변형 유형 매개 변수입니다. 데이터는 텍스트, 이미지 경로, URL 등이 될 수 있습니다.
이 함수는 부울 유형의 반환 값을 갖습니다. True는 데이터가 Datatransfer에 성공적으로 추가되었음을 의미하며, 잘못된 것은 실패했음을 의미합니다. 필요한 경우이 매개 변수를 사용하여 일부 논리가 계속되어야하는지 여부를 결정할 수 있습니다.
GetData (형식) : Datatransfer에 저장된 드래그 데이터를 가져옵니다.
형식은 setData에서와 동일하며 값은 텍스트 (텍스트 유형) 및 URL (URL 유형) 일 수 있습니다.
ClearData (형식) : 지정된 유형의 데이터를 제거합니다.
위에서 지정할 수있는 텍스트 (텍스트 유형) 및 URL (URL 유형) 외에도 여기에서 형식은 파일 파일, HTML-HTML 요소, 이미지 이미지를 취할 수 있습니다.
이 방법을 사용하여 드래그 된 데이터 유형을 선택적으로 처리 할 수 있습니다.
속성 멤버 :이펙트 홀드 : 데이터 소스 요소의 데이터가 수행 할 수있는 작업을 설정하거나 가져옵니다.
속성 유형은 문자열이며 값 범위는 다음과 같습니다.
카피 카피 데이터.
링크 링크 데이터.
이동식 데이터
CopyLink- 대상 객체에 의해 결정된 복사 또는 링크 데이터.
CopyMove- 대상 객체에 의해 결정된 데이터 복사 또는 이동.
LinkMove- 대상 객체에 의해 결정된 링크 또는 이동 데이터.
모든 작업이 지원됩니다.
무형이 금지되어 있지 않습니다.
비 초기화 - 기본값은 기본 동작을 채택합니다.
효과가 없음으로 설정 한 후에는 드래그가 금지되지만 마우스 모양은 여전히 드래그 할 수없는 물체의 모양을 보여줍니다. 이 마우스 모양을 표시하지 않으려면 창의 이벤트 이벤트의 속성 returnValue를 False로 설정해야합니다.
DROPEFFECT : 드래그 된 대상 및 관련 마우스 모양에서 설정 또는 허용 작업을 설정합니다.
속성 유형은 문자열이며 값 범위는 다음과 같습니다 .복사-마우스의 모양이 사본으로 나타날 때;
링크-마우스는 연결 모양으로 표시됩니다.
이동-마우스는 움직이는 모양으로 나타납니다.
없음 (기본값) - 마우스는 드래그하지 않고 모양으로 나타납니다.
Effectallowed는 데이터 소스에서 지원하는 작업을 지정하므로 일반적으로 OnDragStart 이벤트에 지정됩니다. DropeFfect는 대상을 드래그하여 지원되는 조치를 지정하므로 일반적으로 ondragenter, OnDragover 및 Draged Target의 Ondrop과 같은 이벤트에 사용됩니다.
파일 : 드래그 된 파일의 목록을 반환합니다.
유형 : OnDragStart (드래그 데이터)에서 전송 된 데이터 유형 목록.
Datatransfer 객체의 존재는 드래그 된 데이터 소스와 대상 요소 사이에 논리 데이터를 전달할 수있게합니다. 일반적으로 SetData 메소드를 사용하여 데이터 소스 요소의 OnDragStart 이벤트에서 데이터를 제공 한 다음 대상 요소에서 GetData 메소드를 사용하여 데이터를 얻습니다.
드래그하는 동안 이벤트가 트리거되었습니다다음은 드래그 및 떨어질 때 발생하는 이벤트입니다. 기본적으로 이벤트의 트리거 순서는 다음과 같은 순서입니다.
드래그 스타트 : 드래그 할 요소가 끌기 시작하면 트리거되었습니다. 이 이벤트 객체는 드래그 된 요소입니다.
드래그 : 요소를 드래그 할 때 트리거 된이 이벤트 객체는 드래그 된 요소입니다.
Dragenter : 요소를 대상 요소로 끌 때 트리거되었습니다. 이 이벤트 객체는 대상 요소입니다.
드래그 오버 : 요소를 드래그하여 대상 요소에서 이동할 때 트리거되었습니다. 이 이벤트 객체는 대상 요소입니다.
드래그 리브 : 대상 요소에서 요소를 떨어 뜨릴 때 트리거되었습니다. 이 이벤트 객체는 대상 요소입니다.
드롭 : 드래그 된 요소가 대상 요소에 배치 될 때 트리거됩니다. 이 이벤트 객체는 대상 요소입니다.
드래그 : 드롭 후 트리거되어 드래그가 완료되면 트리거됩니다. 이 이벤트 객체는 드래그 된 요소입니다.
기본적으로 이벤트 매개 변수 이벤트는 관련 요소로 전달되며 쉽게 수정할 수 있습니다. 여기서는 각 이벤트를 처리 할 필요가 없습니다. 일반적으로 몇 가지 주요 이벤트 만 연결하면됩니다.
드래그 스타트 이벤트이 이벤트에서 전달 된 매개 변수에는 많은 정보가 포함되어 있으며 드래그 된 요소 (event.target)를 쉽게 얻을 수 있습니다. 드래그 된 데이터 (event.datatransfer.setData)를 설정할 수 있습니다. 따라서 드래그 뒤의 논리를 쉽게 구현할 수 있습니다 (물론 바인딩 할 때 다른 매개 변수를 전달할 수도 있습니다).
드래그 - ondrag, ondragover, ondragenter 및 ondragleave 이벤트 Ondrag 이벤트의 객체는 드래그 요소 이며이 이벤트는 일반적으로 덜 자주 처리됩니다. ondragenter 이벤트는 현재 요소로 끌릴 때 발생하고, ondragleave 이벤트는 현재 요소를 벗어날 때 발생하며, ondragover 이벤트는 현재 요소에서 움직일 때 발생합니다.여기서 주목해야 할 것은 기본적으로 브라우저는 요소의 삭제를 금지하므로 요소가 떨어지려면이 함수에서 False를 반환하거나 이벤트를 호출해야합니다 .preventDefault () 메소드. 다음 예에서 볼 수 있듯이.
드래그 엔드 - Ondrop, Ondragend 이벤트드래그 가능한 데이터가 삭제되면 드롭 이벤트가 트리거됩니다. 드롭이 끝나면 드래그 이벤트가 트리거 되고이 이벤트는 상대적으로 적습니다.
간단한 예를 살펴 보겠습니다.
<! doctypehtml>
<html>
<헤드>
<scriptType = "Text/JavaScript">
functionallowdrop (ev) {
ev.preventDefault ();
}
functionDrag (ev) {
ev.datatransfer.setdata ( "text", ev.target.id);
}
functionDrop (ev) {
vardata = ev.datatransfer.getData ( "text");
ev.target.appendChild (document.getElementById (data));
ev.preventDefault ();
}
</스크립트>
</head>
<body>
<divid = "div1"ondrop = "drop (event)"ondragover = "allowdrop (event)"> </div>
<imgid = "drag1"src = "img_logo.gif"draggable = "true"ondragstart = "drag (event)"width = "336"height = "69"/>
</body>
</html>
파일을 드래그 앤 드래그합니다위의 예는 Datatransfer의 다양한 방법과 특성을 사용했습니다. 인터넷의 또 다른 흥미로운 응용 프로그램을 살펴 보겠습니다. 웹 페이지에서 이미지를 끌고 삭제 한 다음 웹 페이지에 표시하십시오. 이 응용 프로그램은 Datatransfer의 파일 속성을 사용합니다.
<! doctypehtml>
<html>
<헤드>
<metacharset = "utf-8">
<title> html5 드래그 앤 드롭 파일 </title>
<스타일>
#section {Font-Family : "Georgia", "Microsoft Yahei", "Chinese Song";}
.Container {디스플레이 : 인라인-블록; 최소 높이 : 200px; min-width : 360px; color :#f30; 패딩 : 30px; 경계 : 3pxsolid#ddd;-Moz-Border-Radius : 10px; -webkit-border-radius : 10px; Border-Radius : 10px;}.
.preview {max-width : 360px;}
#files-list {위치 : 절대; 상단 : 0; 왼쪽 : 500px;}
#list {너비 : 460px;}
#list.preview {max-width : 250px;}
#listp {색상 :#888; font-size : 12px;}
#list.green {색상 :#09c;}
</스타일>
</head>
<body>
<divid = "섹션">
<p> 이미지를 아래 컨테이너로 드래그하십시오. </p>
<divid = "컨테이너"클래스 = "컨테이너">
</div>
<divid = "files-list">
<p> 드래그 된 파일 : </p>
<ulid = "List"> </ul>
</div>
</div>
<cript>
if (window.filereader) {
varlist = document.getElementById ( 'list'),
cnt = document.getElementById ( '컨테이너');
// 사진이 있는지 판단하십시오
functionisimage (type) {
스위치 (유형) {
Case'Image/jpeg ':
Case'Image/png ':
Case'Image/gif ':
case'image/bmp ':
Case'Image/jpg ':
returntrue;
기본:
returnfalse;
}
}
// 드래그 앤 드롭 파일 목록을 처리합니다
functionHandleFileSelect (EVT) {
evt.stoppropagation ();
evt.preventDefault ();
varfiles = evt.datatransfer.files;
for (vari = 0, f; f = 파일 [i]; i ++) {
Vart = F.type? f.type : 'N/A',
Reader = NewFilEReader (),
외관 = 함수 (f, img) {
list.innerhtml+= '<li> <strong>'+f.name+'</strong> ('+t+
')-'+f.size+'bytes <p>'+img+'</p> </li>';
cnt.innerhtml = img;
},
isimg = isimage (t),
IMG;
// 획득 한 사진을 처리합니다
if (isimg) {
reader.onload = (function (thefile) {
returnfunction (e) {
img = '<imgclass = "preview"src = "'+e.target.result+'"title = "'+thefile.name+'"/>';
외모 (thefile, img);
};
})(에프)
reader.readasdataurl (f);
}또 다른{
img = ' "o ((> ω <)) o", 보낸 것은 사진이 아닙니다! ! ';;
외모 (f, img);
}
}
}
// 삽입을 처리하고 효과를 끌어냅니다
functionHandledRagenter (EVT) {this.setAttribute ( '스타일', '국경 스타일 : 점선;');}
functionHandledRagleave (evt) {this.setAttribute ( 'style', '');}
// 브라우저의 기본 이벤트로 인해 리디렉션을 방지하기 위해 파일 드래그 이벤트 처리
functionHandledRagover (evt) {
evt.stoppropagation ();
evt.preventDefault ();
}
cnt.addeventListener ( 'Dragenter', HandledRagenter, False);
cnt.addeventListener ( 'dragover', handledRagover, false);
cnt.addeventListener ( 'drop', handleFilesElect, false);
cnt.addeventListener ( 'Dragleave', HandledRagleave, False);
}또 다른{
document.getElementById ( 'section'). innerHtml = '브라우저를 지원하지 않습니다.
}
</스크립트>
</body>
</html>
이 예에서는 HTML5에서 API를 읽는 파일이 사용됩니다 : Filereader 객체; 이 개체는 파일을 읽는 다음과 같은 비동기 방법을 제공합니다.
1.FilEREADER.READASBINGINGSTRING (FILEBLOB)
이진 모드에서 파일을 읽으면 결과 속성에는 파일의 이진 형식이 포함됩니다.
2.FilEREADER.READASEXT (fileBlob, opt_encoding)
텍스트 모드에서 파일을 읽습니다. 결과 속성에는 파일의 텍스트 형식이 포함됩니다. 기본 디코딩 매개 변수는 UTF-8입니다.
3.filereader.readasdataurl (파일)
URL 양식에서 파일 결과를 읽는 것은 파일의 DataUrl 형식이 포함됩니다 (이미지는 일반적으로 이런 방식으로).
위의 메소드를 사용하여 파일을 읽으면 다음 이벤트가 트리거됩니다.
onloadstart, onprogress, onabort, onerror, onload, onloadend
이 이벤트는 매우 간단합니다. 필요할 때 연결하십시오. 다음 코드 예를 참조하십시오.
functionstartread () {
// 획득 한 획득
varfile = document.getElementById ( 'file'). 파일 [0];
if (파일) {
getastext (파일);
}
}
functionGetAtherxt (readfile) {
varReader = newFilEReader ();
// readfileintomoryasutf-16
reader.readastext (readfile, "utf-16");
// handleProgress, Success, AndErrors
reader.onprogress = updateprogress;
reader.onload =로드;
reader.onerror = ErrorHandler;
}
functionupDateProgress (EVT) {
if (evt.lengthcomputable) {
//evt.loadedAndevt.TotalAreProgresseventProperties
varloaded = (evt.loaded/evt.total);
if (로드 된 <1) {
// 증가에 eprogbarlength
//style.width=(loaded*200)+"px ";
}
}
}
기능 부하 (evt) {
// thereadFiledata를 얻습니다
varfilestring = evt.target.result;
// handleUtf-16filedump
if (utils.regexp.ischinese (filestring)) {
// chinesecharacters+nameValidation
}
또 다른{
// runotherChareSetTetest
}
//xhr.send(Filestring)
}
functionerRorHandler (EVT) {
if (evt.target.error.name == "notreadableerr") {
// thefile은 아무것도 없을 수 있습니다
}
}
여기에서 간단히 이야기하겠습니다. 일반 파일 다운로드는 Window.open 메소드를 사용합니다.
window.open ( 'http://aaa.bbbb.com/ccc.rar' ,'_blank')
실제 참조 : 공식 문서 : http://www.w3schools.com/html5/좋은 튜토리얼 웹 사이트 : http://html5.phphube.com/html5/features/drapanddrop/
MSDN 도움말 : http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
파일 드래그 앤 드롭에 대한 자세한 설명 : http://www.html5rocks.com/zh/tutorials/file/dndfiles/
파일을 끌고 업로드하십시오 : http://www.chinaz.com/design/2010/0909/131984.shtml
파일 드래그 및 드롭 업로드의 완전한 예 : http://www.vevb.com/liaofeng/archive/2011/05/18/2049928.html
파일 다운로드의 예 : http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
Window.open 안내서 : http://www.vevb.com/liulf/archive/2010/03/01/1675511.html
Window.open 매개 변수 : http://www.koyoz.com/blog/?action=show&id=176