javascript html 5 드래그 기능 쉽게 구현
물체 에 있 는 사건 을 드래그 합 니 다.
html 에서 img 요 소 는 기본적으로 드래그 할 수 있 습 니 다.다른 요 소 는 draggable=true 를 설정 하면 드래그 할 수 있 습 니 다.
어떻게 드래그 목표 가 됩 니까?
html 에서 요 소 는 기본적으로 배치 목표 가 될 수 없습니다.drapenter 와 drapover 이벤트 의 기본 행동 을 금지 할 때 만 드래그 목표 라 고 할 수 있 습 니 다.
droptarget.addEventListener('dragenter', function(event) {
event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
event.preventDefault();
});
이벤트 에는 데이터 트랜스 퍼 대상 이 있 습 니 다.두 가지 일반적인 방법 인 setData()와 getData()는 드래그 정 보 를 저장 하고 드래그 정 보 를 얻 는 데 사 용 됩 니 다.그 중에서 setData()는 드래그 이벤트 가 시 작 될 때 만 설정 할 수 있 습 니 다.즉,dragstart 이벤트 일 때 만 설정 할 수 있 습 니 다.getData()는 보통 설치 해서 가 져 옵 니 다.즉,drop 이벤트 가 시 작 될 때 가 져 옵 니 다.
// drapobj
// droptarget
dragobj.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('drop', function(event) {
var id = event.dataTransfer.getData('id');
var obj = document.getElementById(id);
event.preventDefault();
this.appendChild(obj);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 </title>
</head>
<body>
<div draggable="true"></div>
<div style="height: 150px" id="dragobj" draggable="true">
<img src="c_06.jpg" alt="">
</div>
<div id="droptarget" style="width: 150px; height: 150px;background-color: #eee;"></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');
// drapobj
// droptarget
dragobj.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
var id = event.dataTransfer.getData('id');
var obj = document.getElementById(id);
event.preventDefault();
this.appendChild(obj);
});
</script>
</html>
불 여우 브 라 우 저 에서 그림 을 끌 면 기본적으로 새 창 을 엽 니 다.javascript 고급 프로 그래 밍 에 따라 drop 이벤트 에서 기본 이 벤트 를 금지 하고 문제 가 해결 되 지 않 습 니 다.
해결 방법:그림 을 div 의 배경 그림 으로 하고 div 를 끌 어 당 기 는 물체 로 하면 이 문제 가 존재 하지 않 습 니 다.
최종 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 </title>
<style>
div {
width: 120px;
height: 136px;
}
#dragobj {
background: url('c_06.jpg') no-repeat;
}
#droptarget {
background-color: #eee;
}
</style>
</head>
<body>
<div id="dragobj" draggable="true">
</div>
<div id="droptarget"></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');
// drapobj
// droptarget
dragobj.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
var id = event.dataTransfer.getData('id');
var obj = document.getElementById(id);
event.preventDefault();
this.appendChild(obj);
});
</script>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
