HTML5 드래그 앤 드롭: 드래그 앤 드롭은 무엇을 의미하나요? 그것을 사용하는 방법?-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 드래그 앤 드롭: 드래그 앤 드롭은 무엇을 의미하나요? 그것을 사용하는 방법?

寻∝梦

Aug 13, 2018 pm 07:11 PM

HTML5는 이제 매우 인기가 높습니다. 이 새로운 요소에 대해 알아 보겠습니다. 이 기사에서는 주로 HTML5의 드래그 앤 드롭 요소가 무엇인지, 그리고 이를 사용하는 방법에 대해 설명합니다.

HTML5에서 드래그 앤 드롭은 무엇을 의미하나요?

드래그 앤 드롭은 개체를 잡고 나중에 다른 위치로 드래그하는 일반적인 기능입니다. 에서 끌어서 놓기의 목적은 개체를 배치하려는 위치에 놓을 수 있도록 하는 것입니다. HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 드래그 앤 드롭할 수 있습니다.

드래그 앤 드롭은 각각 무엇을 의미하나요?

darg: 이벤트 본문은 드래그된 요소이며 드래그된 요소를 드래그 앤 드롭할 때 트리거됩니다.

drop: 이벤트 본문은 대상 요소이며, 대상 요소가 드래그 앤 드롭 요소를 완전히 수락할 때 트리거됩니다.

브라우저 지원

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 드래그를 지원합니다.

참고: Safari 5.1.2는 드래그를 지원하지 않습니다.

HTML5 드래그 앤 드롭 사용 예

다음 예는 간단한 드래그 앤 드롭 예입니다.

예는 다음과 같습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
<script> 
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> 
<div id="div1" ondrop="drop(event)" 
ondragover="allowDrop(event)"></div> 
<img src="/static/imghwm/default1.png"  data-src="img_logo.gif"  class="lazy"  id="drag1"  draggable="true" 
ondragstart="drag(event)"  style="max-width:90%" height="69"> 
</body> 
</html>

조금 복잡하지만 드래그 앤 드롭 이벤트의 여러 부분을 별도로 연구할 수 있습니다.

드래그 앤 드롭 이벤트 실행을 위한 세부 단계:

1. 요소를 드래그 가능하게 설정합니다.

먼저 요소를 드래그 가능하게 하려면 draggable 속성을 true로 설정합니다.

<img  draggable="true" alt="HTML5 드래그 앤 드롭: 드래그 앤 드롭은 무엇을 의미하나요? 그것을 사용하는 방법?" >

드래그할 항목 - ondragstart 및 setData()

그런 다음 요소를 드래그할 때 어떤 일이 발생하는지 지정하세요.

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

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

function drag(ev)        
{
ev.dataTransfer.setData("Text",ev.target.id);       
}

이 예에서 데이터 유형은 "텍스트"이고 값은 드래그 가능한 요소의 ID("drag1")입니다.

팁: 이 사이트의 "ondragstart 이벤트" 섹션에서 더 유용한 정보를 배울 수 있습니다!

2. 배치 위치 - ondragover

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

기본적으로 데이터/요소는 다른 요소에 배치될 수 없습니다. 배치를 허용해야 하는 경우 요소의 기본 처리를 방지해야 합니다.

ondragover 이벤트의 event.preventDefault() 메소드를 호출하면 됩니다:

event.preventDefault()

3. Place - ondrop

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

위의 예에서 ondrop 속성은 함수 drop(event)를 호출합니다.

function drop(ev)        
{        
ev.preventDefault();        
var data=ev.dataTransfer.getData("Text");        
ev.target.appendChild(document.getElementById(data));        
}

코드 설명:

preventDefault()를 호출하여 브라우저의 기본 데이터 처리를 방지합니다(드롭 이벤트의 기본 동작은 링크하는 것입니다). 양식으로 열기)

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

드래그된 데이터는 드래그된 요소의 ID("drag1")이며, 드래그된 요소는 배치된 요소(대상 요소)에 추가됩니다.

【관련 추천】

HTML을 처음부터 배울 수 있는 HTML의 기본 요소

HTML과 HTML5의 개발 역사

위 내용은 HTML5 드래그 앤 드롭: 드래그 앤 드롭은 무엇을 의미하나요? 그것을 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

H5 : 웹에서 사용자 경험을 향상시키는 방법Apr 19, 2025 am 12:08 AM

H5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.

H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AM

HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.

H5 코드 이해 : HTML5의 기본 사항Apr 17, 2025 am 12:08 AM

HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.

H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AM

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

H5 : 웹 표준 및 기술의 발전Apr 15, 2025 am 12:12 AM

웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.

H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다Apr 14, 2025 am 12:05 AM

H5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.

H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AM

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

See all articles