ondrag 이벤트

/ * 때 드래그 트리거 * /
document.addEventListener ( "같은 dragstart", 기능 (이벤트) {
//dataTransfer.setData () 메소드는 데이터 유형 및 드래그 데이터를 설정합니다
event.dataTransfer.setData ( "텍스트", event.target.id);
// 출력 텍스트 페이지 요소를 드래그
. 중요 document.getElementById는 innerHTML을 = "페이지 요소를 끌기 시작합니다."( "데모");
드래그 소자의 투명도를 수정 //
event.target.style.opacity = "0.4";
});
// P 동시에 드래그 요소는 텍스트 출력의 색을 변경
document.addEventListener ( "드래그", 기능 (이벤트) {
. 중요 document.getElementById는 style.color = "빨강"( "데모");
});
// 끝 페이지 요소의 출력 일부 텍스트 요소를 끌어과 투명성을 재설정 할 때
document.addEventListener ( "dragend", 기능 (이벤트) {
. 중요 document.getElementById는 innerHTML을 = "전체 페이지 드래그 요소"( "데모");
event.target.style.opacity = "1";
});
/ * 드래그 트리거 * 종료 후 /
p가 DropTarget에 입력 할 때 드래그 요소를 완료 // 테두리 스타일 사업부를 변경
document.addEventListener ( "dragenter에"기능 (이벤트) {
경우 (event.target.className == "DropTarget에") {
event.target.style.border = "3px의 빨간 점선";
}
});
// 기본적으로 데이터 / 요소를 드래그 할 수없는 다른 요소들로 떨어졌다. 드롭을 위해 우리는 기본 프로세싱 요소를 방지해야합니다
document.addEventListener ( "로 dragOver", 기능 (이벤트) {
에서는 event.preventDefault ();
});
드래그 앤 드롭 페이지 요소의 DropTarget를 떠날 때, 사업부 테두리 스타일을 다시 //
document.addEventListener ( "dragleave", 기능 (이벤트) {
경우 (event.target.className == "DropTarget에") {
event.target.style.border = "";
}
});
/ * 드롭의 경우, 기본 데이터를 처리 브라우저를 방지 (드롭 링크는 기본적으로 활성화되어 있습니다)
DIV에의 출력 테두리 색상과 텍스트 색상을 재설정
dataTransfer.getData () 메서드를 삭제하려면 데이터를 사용
걸레 데이터 요소의 ID ( "drag1")
드래그 드롭 요소에 추가 요소 * /
document.addEventListener은 ({), 기능 (이벤트를 "드롭"
에서는 event.preventDefault ();
경우 (event.target.className == "DropTarget에") {
중요 document.getElementById ( "데모") style.color = ".";
event.target.style.border = "";
VAR 데이터 = event.dataTransfer.getData ( "텍스트");
event.target.appendChild (document.getElementById를 (데이터));
}
});