끌어서 놓기

끌어서 놓기 기능은 컴퓨터 사용자가 당연히 "작동"하는 것으로 여기는 기능이며, 브라우저 내에서 이 기능을 사용하도록 설정하는 몇 가지 방법이 있습니다. Windows Internet Explorer 9 및 Windows Internet Explorer 이전 버전에서는 이미지, 링크 및 텍스트 끌기 이벤트와 dataTransfer 개체를 지원합니다. Internet Explorer 10에서는 draggable 특성도 지원하는데, 이 특성을 적용한 모든 HTML 요소를 페이지에서 끌 수 있습니다. 또한 Internet Explorer 10에서는 files 특성을 dataTransfer 개체에 추가합니다. 그러면 데스크톱에서 웹 페이지로 하나 이상의 파일을 끌어서 놓을 수 있습니다.

draggable 특성

draggable 특성을 사용하면 페이지에서 모든 HTML 요소를 끌 수 있습니다. 이 특성은 다음 상태를 제공합니다.

Keyword설명

true

콘텐츠를 끌 수 있습니다.

false

콘텐츠를 끌 수 없습니다.

auto

콘텐츠가 기본 브라우저 동작을 사용합니다(텍스트, 링크 및 이미지는 끌 수 있고 다른 요소는 끌 수 없음).

 

예를 들어 다음 코드 예제에서는 사용자가 화면에서 요소를 끌 수 있습니다.


<button id="mybutton" draggable="true">Drag me</button>
<img src="photo.png" draggable="true" />
<div id="mydiv" draggable="true">Moveable text</div>


사용자가 draggable 요소를 끌면 Internet Explorer 10은 요소를 끌 때 커서와 함께 움직이는 고스트 이미지를 제공합니다. draggable 특성은 상속되지 않으므로 요소의 자식을 자동으로 끌 수 없습니다.

dataTransfer 개체의 files 특성

files 특성을 dataTransfer 개체에 추가하면 폴더나 데스크톱의 파일을 웹 페이지로 끌 수 있습니다. 따라서 첨부 파일을 메시지로 끌거나 갤러리 페이지의 사진을 추가할 수 있는 메일 클라이언트 등의 프로그램을 간단하게 만들 수 있습니다.

다음 이벤트 수신기와 "dropHandler" 함수는 사용자가 파일을 끌 수 있는 영역을 만드는 방법을 보여 줍니다. "dropspot"은 div, img 또는 페이지의 다른 요소일 수 있습니다. dragoverdrop 이벤트는 "doNothing" 함수를 사용하여 이벤트의 기본 처리와 버블링을 차단합니다. 그렇지 않으면 예기치 않은 결과가 발생할 수 있습니다.


// this function runs when the page loads to set up the drop area
function init() 
{
  // Set the drop-event handlers.
  var dropArea = document.getElementById("dropspot");
  dropArea.addEventListener("drop", dropHandler, false);
  dropArea.addEventListener("dragover", doNothing, false);
}
function dropHandler(event)
{
  // Use our doNothing() function to prevent default processing. 
  doNothing(event);
  // Get the file(s) that are dropped.
  var filelist =  event.dataTransfer.files;
  if (!filelist) return;  // if null, exit now
  var filecount = filelist.length;  // get number of dropped files

  if (filecount > 0) 
  {
    // Do something with the files.         
  } 
}
// Prevents the event from continuing so our handlers can process the event.
function doNothing(event)
{
  event.stopPropagation();
  event.preventDefault();
}


API 참조

dataTransfer
DragEvent
draggable

샘플 및 자습서

HTML5 끌어서 놓기 샘플

Internet Explorer 테스트 드라이브 데모

Magnetic Poetry

IEBlog 게시물

IE10 PPB2의 HTML5 끌어서 놓기

사양

HTML5: 섹션 7.7

 

 

표시:
© 2014 Microsoft