HTML5의 Draggable 속성은 무엇입니까?

html5의 draggable 속성은 요소가 "true", "false"또는 빈 문자열 ( "true"와 동일)으로 드래그 할 수 있는지 여부를 지정합니다. 2. draggable = "true"설정은 모든 요소에 대한 드래그 앤 드롭을 가능하게하지만 DragStart, Dragover, Drop 및 Dragend와 같은 JavaScript 이벤트 리스너는 동작을 완전히 구현해야합니다. 3. 일반적인 사용 사례에는 목록 항목을 재정렬, 파일 이동 및 대화식 대시 보드 구축이 포함됩니다. 4. 예에서, div는 드래그 오버에서 e.preventDefault ()를 사용하여 지정된 드롭 영역으로 떨어질 수 있도록 DIV를 삭제하고 데이터를 전달하도록 허용합니다. 5. 스크린 리더가 영향을받을 수 있으므로 ARIA 역할을 사용하고 키보드 지원을 보장함으로써 접근성을 고려해야합니다. Draggable 속성은 기본 HTML5 드래그 앤 드롭 기능을 가능하게하지만 프로세스를 제어하고 접근성을 보장하려면 JavaScript가 필요합니다.

html5의 draggable 속성은 요소를 드래그 할 수 있는지 여부를 지정하는 글로벌 속성입니다. 모든 HTML 요소의 드래그 앤 드롭 기능을 활성화하거나 비활성화하는 데 사용됩니다.

기본적으로 링크 및 이미지와 같은 특정 요소 만 드래그 가능합니다. 그러나 draggable 속성을 사용하면 div , p , span 또는 사용자 정의 구성 요소와 같은 요소를 드래그 가능하게 만들 수 있습니다.

작동 방식

draggable 속성은 세 가지 가능한 값을 수용합니다.

• "true" - 요소를 드래그 할 수 있습니다
• "false" - 요소를 드래그 할 수 없습니다
• "" (빈 문자열) - "true" 와 동일

예를 들어:

 <div draggable = "true"> drag me! </div>
<span draggable = "false"> 이것은 드래그하지 않습니다 </span>

draggable="true" 설정은 첫 번째 단계입니다. 전체 드래그 앤 드롭 동작을 구현하려면 JavaScript 이벤트 리스너와 같은 것을 사용해야합니다.

• dragstart - 드래그가 시작될 때
• dragover - 드래그 된 요소가 드롭 대상 위에있을 때
• drop - 요소가 떨어질 때
• dragend - 드래그 작동이 끝나는 경우

일반적인 사용 사례

• 목록 항목 재정렬 (예 : 작업 목록)
• 컨테이너 사이의 파일 또는 요소 이동
• 대화식 대시 보드 또는 UI 빌더 구축

예 : 간단한 드래그 앤 드롭

 <div draggable = "true"id = "drag-element"style = "패딩 : 20px; 배경 : lightblue;">
  나를 끌어라
</div>

<div id = "drop-zone"style = "패딩 : 50px; 테두리 : 2px 대시 회색; 마진-탑 : 20px;">
  여기에 떨어 뜨리십시오
</div>

<cript>
  document.getElementById ( &#39;drag-element&#39;). addeventListener ( &#39;dragstart&#39;, function (e) {
    e.datatransfer.setdata ( &#39;text/plain&#39;, &#39;drag-element&#39;);
  });

  document.getElementById ( &#39;drop-zone&#39;). addeventListener ( &#39;dragover&#39;, function (e) {
    e.preventDefault (); // 드롭을 허용합니다
  });

  document.getElementById ( &#39;drop-zone&#39;). addeventListener ( &#39;drop&#39;, function (e) {
    e.preventDefault ();
    const id = e.datatransfer.getData ( &#39;text/plain&#39;);
    const element = document.getElementById (id);
    e.target.appendChild (요소);
  });
</스크립트>

메모

• dragover 에서 항상 e.preventDefault() 호출하여 드롭을 허용하십시오
• dataTransfer 드래그 작업 중에 데이터를 전달하는 데 사용됩니다.
• 스크린 리더 및 접근성 도구에 영향을 줄 수 있으므로 적절한 키보드 지원으로 draggable 과 같은 ARIA 역할을 고려하십시오.

기본적으로 draggable 속성은 기본 HTML5 드래그 앤 드롭을 잠금 해제하지만 프로세스 중에 발생하는 일을 제어하려면 JavaScript가 필요합니다. 설정은 간단하지만 대화식 인터페이스에는 강력합니다.

위 내용은 HTML5의 Draggable 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!