HTML5 포인터 변경

HTML5 포인터 변경

 

포인터 변경 속성

속성	변경
dropEffect	드래그가 끝날때 어떤 효과를 사용할지 지정함 (값: none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized)
effectAllowed	드래그하는 동안 어떤 효과를 사용해도 되는지 지정함 (값: none, copy, link, move)

일반적으로 effectAllowed 속성은 드래그시 발생하는 dragstart 이벤트에 지정하고, dropEffect 속성은 드롭할 때 발생하는 dragenter 이벤트와 dragover 이벤트에서 사용합니다.

 

예제

function  dropset(event) {     event.preventDefault( );     event.dataTransfer.dropEffect = "copy";   // 드래그가 끝날 때 copy 효과를 지정함 } function  drag(event) {     event.dataTransfer.setData("Text", event.target.id);     event.dataTransfer.effectAllowed = "copy";   // 드래그 하는 동안 copy 효과를 지정함 }

 

마우스 커서 위에 표시될 이미지 변경 관련 메서드

메서드	설명
setDragImage(element  x,  y)	드래그 중인 마우스 커서 위의 이미지를 변경함
addElement(element)	지정한 이미지를 드래그 아이콘의 이미지로 추가함

① setDragImage() 메서드

setDragImage() 메서드는 드래그 중인 마우스 커서 위의 아이콘을 변경하는 메서드입니다.

setDragImage() 메서드의 인수는 마우스 커서 위에 표시할 이미지 변수와 커서가 위치할 x좌표, y좌표를 지정합니다.

 

② addElement() 메서드

addElement() 메서드는 지정한 이미지를 드래그 아이콘의 이미지로 추가하는 역할을 수행하는 메서드입니다.

addElement() 메서드의 인수는 이미지 변수를 지정합니다.

 

예제

fuction  drag(event) {    event.dataTransfer.setData( "Text", event.target.id );    var  icon = document.createElement("img");    icon.src = "flower.jpg"    event.dataTransfer.setDragImage(icon, 0, 0);   // 지정한 이미지의 0, 0 위치에 마우스 커서를 위치함 }

 

포인터 변경 실습 프로그램