HTML5 드래그 앤 드롭

Posted on

HTML5 에서 HTML 페이지 내에서 HTML 요소를 드래그 앤 드롭 할 수 있습니다. 자바 스크립트 이벤트 리스너를 통해 사용자가 요소를 드래그하고 삭제할 때 어떤 일이 발생하는지 결정할 수 있습니다.

는 동안 드래그 앤 드롭 HTML 요소에 가지고 갈 수 있는 두 개의 역할:

  1. 드래그
  2. 드롭상/drop zone.

draggable 요소는 사용자가 HTML 페이지 주위를 드래그하여 어딘가에 드롭 할 수 있어야하는 요소이며 일부 작업이 발생합니다. 이것은 하나 이상의 요소 일 수있다.,

드롭 대상 또는 드롭 영역은 드래그 가능한 요소가 드롭되는 요소입니다.

끌어서 놓기 이벤트

을 어떻게 통제 드래그 앤 드롭하는 경우 HTML 을 요소,수행해야 하는 3 단계:

  1. 설정 HTML 요소를 드래그 할 수 있습니다.,
  2. 이벤트 수신기를 연결해 드래그 HTML 요소
  3. 연결 이벤트에 청취자를 대상 HTML 요소

이벤트와 특성은 그림이 여기:

첫 번째로 설정할draggable="true"특성에 HTML 요소(s)을 드래그 할 수 있습니다.

두 번째 연결 이벤트에 청취자에서 드래그 요소에 대해dragstart및dragend이벤트입니다., 내부 이러한 이벤트에 청취자를 구현할 수 있습니다 무엇이 일어날 때 사용자가 끌어 요소,그리고 때로 끌면 끝납니다.

셋째 드롭 대상 요소에 이벤트 리스너를 첨부합니다. 이벤트를 수신할 수 있습은dragenter,dragover,dragleave및drop.

dragenter이벤트가 발생할 때 사용자가 끌 드래그에 드롭 대상입니다., 이벤트 발생 때 드래그 할 수있는 요소는 변경되는 외부 이상되는,일반적으로 결정의 위치에 마우스 커서입니다.

면 드래그 할 수있는 요소를 통해 대상의dragover이벤트가 발생하며,발사에 대한 만큼 드래그 할 수있는 요소를 끌고 이 드롭 대상입니다.

경우에는 사용자가 끌 드래그 할 수있는 개체의 드롭 다시 대상,dragleave이벤트가 발생합니다.

경우에는 사용자를 삭제 드래그 할 수있는 객체에 대상의drop이벤트가 발생합니다.,

드래그 앤 드롭 이벤트 예

여기를 들어 재생할 수 있습니다. HTML5 로고를 드롭 대상으로 드래그하여 어떤 일이 발생하는지 확인하십시오. 이미지를 삭제하고 다시 드래그하십시오.

드롭지 요소
동작은 dragstart:
dragend:
dragenter:
dragover:
dragleave:
드롭:

드래그 앤 드롭 코드

우리 살펴보를 처리하는 방법을 끌어서 놓기 이벤트입니다., 먼저 드래그 할 수있는<img>요소를 만듭니다. 다음은 HTML 코드:

<img src="http://tutorials.jenkov.com/html5/..." draggable="true">

일단 우리가 드래그 요소가 필요해 드롭 대상입니다. 내가 사용하는<div>요소:

<div style="width: 200px; height: 200px;">Drop here</div>

한 번 우리가 드래그 요소 및 대상 요소,우리는 우리를 첨부해야 이벤트에 청취자입니다., 여기에는 JavaScript 코드:

dragStart()함수 호출event.dataTransfer.setData()설정하기 위해 데이터를 전송하는 대상을 때 요소입니다. 드롭 액션을 제대로 마무리하는 데 필요한 데이터가 무엇이든 여기에 설정하십시오. 데이터 및 해당 mime 유형을 모두 설정합니다.

dragOver()및drop()이벤트 핸들러는 모두event.preventDefault()를 호출하고 false 를 반환합니다. 이것은 드래그 앤 드롭이 제대로 작동하도록하는 데 필요합니다., 브라우저에 있는 몇 가지 기본 드래그 앤 드롭 동작을 사용하지 않도록 설정해야하는 코드를 작동합니다.

통지 또한drop()이벤트 처리 기능 데이터를 읽고 설정에서dragStart()통해 전화를event.dataTransfer.getData(). 데이터의 mime 유형을 매개 변수로 전달하여 적절하게 추출합니다.HTML5 에서 드래그 앤 드롭을 구현하는 데 필요한 모든 것입니다. 당신은 우리가 다음 섹션에서 볼 수 있듯이,그래도 좀 더 시각적으로 기쁘게 만들 수 있습니다.,

시각적 피드백

사용할 수 있는 끌어서 놓기 이벤트는 핸들러 기능을 사용하여 더욱 명확한 시각적 피드백.

우선,사용자가 드래그하는 요소를 볼 수 있도록 드래그중인 요소를 표시 할 수 있습니다. 는 경우 여러 요소에 동일하게 보고 그들은 모두를 끌고,그것은 좋은 사용자를 위해 보이는 것입니다. dragstart이벤트에 대한 응답으로 그렇게 할 수 있습니다. 다음은 예입니다.

드래그가 끝나면 테두리를 다시 제거하고 싶습니다., 이 작업은dragend이벤트에 대한 응답으로 수행됩니다. 여기에는 방법이 이루어집니다:

이제 사용자에게 시각적 피드백을 보여주는 어떤 요소가 됩니다.또한 드롭 대상 위로 드래그 할 때 드래그 가능한 요소를 드롭 할 수 있음을 사용자에게 보여주고 싶습니다. 다시 우리는 요소의 경계를 바꿀 것입니다. 우리는 그렇게 할 것입니다에 대응하여dragenter,dragleave및drop이벤트입니다., 여기에는 방법이 이루어집니다:

이제 국경의 대상이 되고 선을 때 드래그 할 수있는 요소를 끌고 있다. 드래그 가능한 요소가 다시 드래그 아웃되거나 요소가 드롭 대상에 드롭되면 테두리가 제거됩니다.

위의 예를 보여주지 않았dragOver()이벤트 처리기능지만,추가하는지 확인하기 위해 이 기본 브라우저의 행동을 했다.,

여기에는 전체 코드 후에는 시각적 피드백을 추가되었습니다:

DataTransfer 체,effectsAllowed,dropEffect 및 setDragImage()

을 증가시킬 수 있는 시각적 피드백을 주어서 사용하는 동안 드래그 앤 드롭 동작을 사용하는DataTransfer개체입니다. DataTransfer객체에는 2 개의 속성과이 용도로 사용할 수있는 하나의 함수가 있습니다., 이들은:

  • effectsAllowed
  • dropEffect
  • setDragImage()

에 액세스할 수 있는DataTransfer체에서dragstart및drop이벤트 객체입니다. 여기에 예를 들어dragstart수신기 기능을 설정하는effectsAllowed속성DataTransfer개체:

effectsAllowed속성을 사용하여 브라우저를 변경하는 마우스 커서의 종류를 표시할 때 수행할 작업을 끌어다 놓는 요소입니다., 일반적으로 드래그 된 요소가 드롭 대상 위에 있으면 마우스 커서가 변경됩니다. 전에는 아니야. 유효한 값은effectsAllowed속성:

  • none
  • 사본
  • move
  • copyMove
  • 링크
  • linkMove
  • copyLink
  • all
  • 초기화되지 않은

dropEffect 을 보여 사용자는(을 통해 커서)무슨 일이 발생하는 경우 통해 드롭 대상이지만,이 글을 쓰는 시점에서(feb. 2014)브라우저는이를 무시하는 것 같습니다., 유효한 값은dropEffect속성

  • none
  • 사본
  • 링크
  • move

setDragImage(image, x, y)기능을 설정하는 데 사용할 수 있습과 이미지 브라우저에 의해 사용자가 끌 요소입니다. 기본적으로 브라우저에 보여줍니다 반투명 원본의 사본 요소,하지만 당신이 원하는 경우 다른 이미지를 설정할 수 있습니다 다른 이미지를 사용하여 이 기능이 있습니다. x및y속성을 사용할 수 있는 것을 설정 오프셋 위치한 이미지가 표시됩니다., 기본적으로 드래그 이미지의 왼쪽 상단 모서리는 마우스 포인터의 끝 부분에 있습니다. 을 설정하여 다른x및y속성을 변경할 수 있습니다. 중 하나를 사용할 수 있습니다 긍정적 또는 부정적인x및y오프셋.

여기에는 코드는 방법을 보여주는 예를 설정하는 이미지 끌어 안에dragStart()이벤트에 청취자 기능:

여기에는 예을 재생할 수 있습에 다양한 설정을DataTransfer개체입니다., 변경하십시오effectsAllowed드래그에 이미지와 어떻게 볼 때 당신은 드래그 HTML5 로고 아래로div드롭 대상입니다.

여기

파일을 드래그 브라우저에

이것이 가능한 파일을 끌어로 브라우저에서의 파일 시스템,그리고 이름을 읽고의 콘텐츠에 끌어 파일에서 JavaScript. HTML5 파일 API 를 통해 그렇게합니다., 다음은 드래그 된 파일의 파일 이름을 감지하는 드롭 대상 리스너입니다.

var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i 
 Notice how the 
 function does not call the 
 function, but instead accesses the 
 property of the 
. The 
 property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon).
 You can read more about how to access the dragged files in my HTML5 file API tutorial.

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다