드래그오버 또는 드래그엔터 이벤트에서 DataTransfer.getData에서 데이터를 가져오는 방법

드래그오버 또는 드래그엔터 이벤트에서 DataTransfer.getData에서 데이터를 가져오는 방법

코드가 있습니다.

element.addEventListener('dragstart',function(e){
   e.dataTransfer.setData('Text', 'something is here');
},false);

DataTransfer.getData에서 Drop이 실행 중이지만 이벤트 드래그오버 또는 드래그엔터에서 데이터를 가져오려면 데이터가 null이 됩니다.

element.addEventListener('dragover',function(e){
   var a = e.dataTransfer.getData('Text');
   console.log(a);
},false);

이벤트 드래그오버 또는 드래그엔터 시 데이터를 얻는 방법

일반적으로 다음 이벤트에서는 이 정보에 액세스할 수 없습니다.dragstart그리고.drop파이어폭스는 사용자에게 접근권을 주는 것처럼 보이지만 표준과 어긋나는 것 같습니다.

드래그 앤 드롭 중에 데이터가 전송되는 방법은data storeobject. 여기에는 다양한 조작에 필요한 모든 정보가 포함되어 있습니다.단, 이 정보를 사용하여 수행할 수 있는 작업에는 다음과 같은 제한이 있습니다.event이 데이터 저장소에 액세스할 수 있습니다.3가지 모드가 있으며 다음과 같이 정의됩니다.

드래그 데이터 저장소 모드. 다음 중 하나입니다.

읽기/쓰기 모드

드래그 스타트 이벤트의 경우.드래그 데이터 저장소에 새 데이터를 추가할 수 있습니다.

읽기 전용 모드

드롭 이벤트.드래그된 데이터를 나타내는 항목 목록을 데이터를 포함하여 읽을 수 있습니다.새 데이터를 추가할 수 없습니다.

보호 모드

다른 모든 이벤트용.끌어온 데이터를 나타내는 항목의 끌어오기 데이터 저장소 목록에 있는 형식 및 종류를 열거할 수 있지만 데이터 자체는 사용할 수 없으며 새 데이터를 추가할 수 없습니다.

https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

따라서 드래그오버 시 데이터 저장소는 보호 모드이므로 데이터를 사용할 수 없습니다.Firefox는 이 기능을 다른 방식으로 구현하지만 어떤 경우에도 이 기능에 의존해서는 안 됩니다.

이러한 모드는 보안상의 이유로 존재합니다.이러한 데이터 전송은, 같은 페이지의 요소 뿐만이 아니라, 다른 애플리케이션이나 파일등의 데이터 전송도 가능하게 합니다.

언급URL : https://stackoverflow.com/questions/31915653/how-to-get-data-from-datatransfer-getdata-in-event-dragover-or-dragenter