javascript 드래그 호 환 div 의 위치 구현 예시
dom 요 소 를 이용 한 dragstar/ndragover/ndrop 이벤트 가 완료 되 었 습 니 다.드래그 를 시작 할 때 드래그 요 소 를 가 져 온 다음 드래그 를 허용 합 니 다.마지막 으로 마 우 스 를 들 어 새로운 위치 에 놓 습 니 다.이벤트.prevent Default()방법 을 사 용 했 습 니 다.많은 분 들 이 궁금 해 하 실 수 있 습 니 다.간단하게 소개 하 겠 습 니 다.
이벤트.preventDefault():이 방법 은 브 라 우 저가 이벤트 와 연 결 된 기본 동작 을 실행 하지 않도록 하 는 것 입 니 다
dragover 이벤트 에서 사용 합 니 다.dragover 와 관련 된 기본 동작 은 데이터 나 요 소 를 다른 요소 에 배치 하 는 것 을 막 기 때 문 입 니 다.따라서 이벤트.prevent Default()를 통 해 이 기본 이 벤트 를 금지 해 야 합 니 다.요 소 를 새로운 위치 로 끌 수 있 습 니 다.
<!-- div gis -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
display: flex;
padding: 100px;
flex-direction: column;
}
div{
width: 100px;
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div style="background-color: red;width:200px;height:200px;" draggable="true"> </div>
<div style="background-color: green;width:100px" draggable="true"> </div>
<div style="background-color: blue;" draggable="true"> </div>
</body>
<script type="text/javascript">
let div =document.getElementsByTagName("div");
let container=null;
// div dragstart dragover drop
for(let i=0;i<div.length;i++){
div[i].ondragstart=function(){
container=this
}
div[i].ondragover=function(){
event.preventDefault();
}
div[i].ondrop=function(){
debugger;
if(container!=null&&container!=this){
//
let temp=document.createElement("div");
document.body.replaceChild(temp,this); // div
document.body.replaceChild(this,container);// div
document.body.replaceChild(container,temp) // div
debugger;
console.log(' ')
}
}
}
</script>
</html>
자 바스 크 립 트 드래그 호 환 div 의 위치 구현 예시 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 드래그 호 환 div 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
