HTML5 드래그 앤 드롭

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2849 2849

HTML5 드래그 앤 드롭

끌어서 놓기

드래그 앤 드롭은 매우 일반적인 기능입니다. 그것은 당신이 물건을 "움켜 잡아"다른 위치로 끌 때입니다.

HTML5에서 드래그 앤 드롭은 표준의 일부입니다. 모든 요소를 드래그 할 수 있습니다.

HTML 끌어서 놓기 예제

아래의 예제는 간단한 드래그 앤 드롭 예제입니다.

<!DOCTYPE HTML>

<html>

<head>

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69">

</body>

</html>

요소를 드래그 가능하게 만들기

먼저 요소를 드래그 할 수있게하려면 draggable 속성을 true로 설정하십시오.

무엇을 드래그 할 것인가 - ondragstart와 setData ()

그런 다음 요소를 끌 때 발생할 일을 지정하십시오.

위의 예에서 ondragstart 속성은 드래그 할 데이터를 지정하는 함수 drag (event)를 호출합니다.

dataTransfer.setData () 메서드는 데이터 유형과 드래그 된 데이터의 값을 설정합니다.

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

이 경우 데이터 유형은 "텍스트"이고 값은 드래그 할 수있는 요소의 ID입니다 ( "drag1").

어디서 떨어지는 지 - ondragover

ondragover 이벤트는 드래그 된 데이터를 삭제할 수있는 위치를 지정합니다.

기본적으로 데이터 / 요소는 다른 요소에 놓을 수 없습니다. 드롭을 허용하려면 요소의 기본 처리를 방지해야합니다.

ondragover 이벤트에 대해 event.preventDefault () 메서드를 호출하면됩니다.

event.preventDefault()

Drop - ondrop을하십시오.

드래그 된 데이터가 삭제되면 드롭 이벤트가 발생합니다.

위 예제에서 ondrop 속성은 함수 drop (이벤트)을 호출합니다.

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

설명 된 코드 :

1.데이터의 브라우저 기본 처리를 방지하려면 preventDefault ()를 호출하십시오 (기본값은 드롭 다운 링크로 열림)

2.dataTransfer.getData () 메소드로 드래그 된 데이터를 가져옵니다. 이 메서드는 setData () 메서드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다.

3.드래그 된 데이터는 드래그 된 요소의 ID입니다 ( "drag1").

4.드래그 한 요소를 드롭 요소에 추가합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
1277	기타	이미지 최적화 (WebP/AVIF & Lazy Loading)	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2개월 전	148
1276	CSS	고급 레이아웃(Grid + Flex 혼합 활용)	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2개월 전	271
1275	CSS	CSS 애니메이션 고급 활용	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2개월 전	271
1274	CSS	픽셀 단위 고정 대신 유연한 단위를 쓰자 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3개월 전	462
1273	기타	트러블슈팅 & 품질 관리 중심	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	401
1272	CSS	SVG를 마치 CSS처럼 활용하기	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	531
1271	CSS	웹폰트 로딩 최적화 [3]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	579
1270	CSS	다크 모드(Dark Mode) 지원을 위한 CSS 전략 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	457
1269	CSS	CSS revert 키워드로 손쉽게 스타일 초기화하기 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	540
1268	CSS	알러트 모양( 삼각 판넬 안에 느낌표 ) css와 dom으로 만들기	예뜨락 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6개월 전	429
1267		이미지 갤러리 (직)제작 소스	잠실삼촌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	709
1266	HTML	bootstrap4 grid-item 책갈피 표시	하얀감자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	838
1265	CSS	clamp를 사용하는 경우에 대해서 여쭈어 봅니다. [2]	7reemoon 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	768
1264		파일 입력필드 숨기고 아이콘(폰트어썸)으로 대체	Tak2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1259
1263	HTML	textContent는 MOZ의 MDN에서 XSS해킹이 않된다 그러나 다중은 않되요 그러나 해결과 해결할 일	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	792
1262	CSS	Div 를 프레임으로 잡기 tested by w3schools.com	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	997
1261	CSS	기본적인 CSS 사용 태그 [ Site on Base Default - Custom Free ]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1011
1260	HTML	마우스 클릭시 효과음 나오고 마우스에 서클 퍼지는 효과 재미 있네요..	설국열차 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1491
1259	기타	나리야빌더 사용중 페이징중에 바로 이전이나 다음 페이지가 동작이 안되는증상 해결	정후이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	828
1258	CSS	스와이퍼 페이징 커스텀 방법 어떻게 하나요...?? [3]	김성래yo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1586
1257	HTML	input의 팁	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1372
1256	CSS	css 애니메이션 눈 떨어지는 레이아웃(스킨인데 못올리게 해서 여기에다...)	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1275
1255		상업이용 가능한 디자인소스(html, css) 완성 코딩 소스입니다. [16]	샤이닝 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	3613
1254		<div>을 iframe처럼 만들기 [5]	천사의눈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	4795
1253		radio 버튼 클릭하면 input text 값 넘겨주기 [6]	취뉴비 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1554
1252	레이아웃	아무데서나 쓸수 있는 팝업창 기능 만들어보았습니다. [7]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1785
1251	웹접근성	미니 웹 음악 플레이어 LP player Music (LPM) [12]	두리삼촌v 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2059
1250	레이아웃	이전자료 DLplayer Audio 버전입니다. [19]	두리삼촌v 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1694
1249	레이아웃	웹음악플레이어 (html5 및 자바스크립트 기반) [30]	두리삼촌v 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	3217
1248	기타	(html,js,css) javascript alert메서드 자체를 변경하여, 팝업 alert 만들어보기	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1149