네이티브 드래그 앤 드롭 관련 추천 콘텐츠

　 Dragable 속성 이전에 HTML5의 기본 드래그 앤 드롭에 대한 몇 가지 관련 지식을 소개했습니다. 오늘은 HTML5 드래그 앤 드롭의 또 다른 작은 것들을 소개하겠습니다. 더 이상 고민하지 말고 함께 살펴보겠습니다. 기본적으로 링크, 텍스트, 이미지는 드래그 가능하므로 드래그하기 위해 코드를 작성할 필요가 없습니다. 다른 요소 태그를 드래그할 수 있게 하려면 HTML5만 가능합니다. HTML5는 모든 HTML 요소에 대해 요소를 끌 수 있는지 여부를 나타내는 dragable 속성을 지정합니다. 링크 및 이미지 태그에서는 dragable 속성이 자동으로 true로 설정되며, 다른 요소의 dragable 속성은 기본값이 false입니다. dragable 속성을 지원하는 브라우저는 Firefox 4+, Chrome, IE 10+ 및 Safari 5+입니다. Opera 11.5 및 이전 버전은 HTML5 드래그 앤 드롭 기능을 지원하지 않습니다. 또한 Firefox에서 드래그 가능한 속성을 지원하려면 ondragstart 이벤트 핸들러를 추가하고 dataTransfer 개체에 일부를 저장해야 합니다

1. HTML5 실제 전투 및 기본 드래그 분석(드래그 가능한 속성 4개 및 기타 멤버)

소개: 이전에 HTML5의 기본 드래그 앤 드롭에 대한 몇 가지 관련 지식을 소개했습니다. 오늘은 Html5 드래그 앤 드롭의 다른 작은 것들을 소개하겠습니다. 더 이상 고민하지 말고 함께 살펴보겠습니다.

2. HTML5 실제 전투 및 네이티브 드래그 분석(3개의 dataTransfer 개체)

소개: 네이티브 드래그는 dragstart, drag 및 dragend 이벤트를 통해 구현됩니다. 하지만 이것은 단지 드래그 앤 드롭일 뿐입니다. IE6과 IE7에는 여전히 드래그 앤 드롭 문제가 있으며 데이터 교환이 구현되지 않습니다. 데이터 교환을 실현하기 위해 IE5에서는 dataTransfer 개체를 도입했습니다. dataTransfer 객체는 드래그된 요소에서 드롭 대상으로 문자열 형식의 데이터를 전송하는 데 사용되는 이벤트 객체의 속성입니다. dataTransfer 객체는 이벤트 객체의 속성이기 때문에 드래그 앤 드롭 이벤트의 이벤트 핸들러 내에서만 액세스할 수 있습니다. 이벤트 핸들러에서 이 개체의 속성과 메서드를 사용하여 끌어서 놓기 기능을 완료할 수 있습니다.

3. HTML5 실제 전투 및 기본 드래그 분석(두 가지 드래그 이벤트 dragstart, drag 및 dragend)

소개: 드래그 이벤트를 통해 많은 드래그를 제어할 수 있습니다. 드래그 이벤트가 발생하는 요소나 위치가 가장 중요합니다. 일부 이벤트는 드래그된 요소에서 시작되고 일부 이벤트는 드롭 대상에서 시작됩니다. 요소를 드래그할 때 트리거되는 이벤트는 dragstart 이벤트, drag 이벤트 및 dragend 이벤트입니다.

4. HTML5 실제 전투 및 네이티브 드래그 앤 드롭 분석(드래그 앤 드롭 기록 개요)

소개: 드래그 앤 드롭을 언급할 때 아주 흥미로운 이야기가 생각났습니다. JavaScript 교육 중 효과가 드래그됩니다. 마우스를 사용하여 원하는 위치로 개체를 끌 수 있습니다.

위 내용은 네이티브 드래그 앤 드롭 관련 추천 콘텐츠의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!