사용자가 드래그하는 개체를 유효한 목표 드롭에서 놓으면 목표 엘레멘트에 발생된다.


이벤트 속성		 object.ondragenter=handler JScript 만-
object.ondragenter=GetRef('handler') VBScript 5.0-
인라인 HTML <ELEMENT ondragenter="handler"> 모든 플랫트폼
명명된 스크립트 <SCRIPT for=object event=ondragenter> Explorer-
이벤트 특성
Bubbles 있슴
취소 가능
발생 원인
  • 선택되어 드래그하는 개체를 브라우저 속의 유효한 드롭 목표에서 왼쪽마우스를 놓았을 때.
  • 선택되어 드래그하는 개체를 다른 윈도우의 유효한 드롭 목표에서 왼쪽마우스를 놓았을 때.
디폴트 작용 연관된 이벤트처리자를 호출한다.
HTML 규격 비규격 IE 확장.

DHTML 개체 모델에서 이벤트처리자는 파라메터들을 직접 받지는 못해도, event개체의 쿼리를 사용할 수 있다.

altKey ALT 키가 눌렸는가를 반환하거나 설정한다.
altLeft 왼쪽 ALT 키가 눌렸는가를 반환하거나 설정한다.
cancelBubble 현재 이벤트가 이벤트처리자들의 계통도에서 버블업(bubble up)하여야 하는가를 반환하거나 설정한다.
clientX 윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수평 좌표를 반환하거나 설정한다.
clientY 윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수직 좌표를 반환하거나 설정한다.
ctrlKey CTRL 키가 눌렸는가를 반환하거나 설정한다.
ctrlLeft 왼쪽 CTRL 키가 눌렸는가를 반환하거나 설정한다.
dataTransfer 끌어 놓기(drag-and-drop) 작업들을 위해 사전에 정의된 클립보드 양식들을 제공한다.
offsetX 이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수평 좌표를 반환하거나 설정한다.
offsetY 이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수직 좌표를 반환하거나 설정한다.
returnValue 이벤트로 부터의 반환값을 반환하거나 설정한다.
screenX 사용자 스크린에 상대적인 마우스포인터의 수평 위치를 반환하거나 설정한다.
screenY 사용자 스크린에 상대적인 마우스포인터의 수직 위치를 반환하거나 설정한다.
shiftLeft 왼쪽 SHIFT 키가 눌렸는가를 반환하거나 설정한다.
srcElement 이벤트를 발생시킨 개체를 반환하거나 설정한다.
type 이벤트 개체의 이벤트 명칭을 반환하거나 설정한다.
x 상대적으로 위치한 모체 개체에 상대적인 위치 수평 좌표를 반환하거나 설정한다.
y 상대적으로 위치한 모체 개체에 상대적인 위치 수직 좌표를 반환하거나 설정한다.

특기

ondragenter 이벤트를 원본 개체나 목표 개체에서 다룰 수 있다. 드래그 작동 중 목표 이벤트들 중에서 제일 먼저 발생한다. 목표 이벤트들은 getData 메서드를 사용하여 데이터 이전에서 어디로부터, 어떤 형식으로 이전되는가를 결정한다.

드래그드롭 작동의 순서를 보면:

기능성 스크립트를 작성하기 위해서 returnValue 속성을 사용하여 디폴트 활동을 중지시킬 수 있다.

적용
개체scriptHTMLIE


ondragstart, ondrag, ondragend, ondragenter, ondragover, ondragleave 이벤트 예제

원본 :

목표 :

원본을 목표에 드래그 드롭해 보라.

<SCRIPT>
var newOption;
function showIt(){
  str=event.srcElement.id+' '+event.type+' 이벤트 발생';
  newOption=new Option();
  newOption.text=str;
  selArr.add(newOption,selArr.length);
}
</SCRIPT>
<P>원본 : <INPUT id=orgObj value="원본 텍스트"
  ondragstart="showIt()" ondrag="showIt()" ondragend="showIt()" onfocus="this.select()">
<P>목표 : <INPUT id=tgtObj value="목표 지역"
   ondragenter="showIt()" ondragover="showIt()" ondragleave="showIt()" ondrop="showIt()"><BR>
<SELECT id=selArr size=20 style=width:400><OPTION>이벤트 발생 목록</SELECT>