> 웹 프론트엔드 > CSS 튜토리얼 > HTML 페이지에서 이미지 드래그를 방지하려면 어떻게 해야 합니까?

HTML 페이지에서 이미지 드래그를 방지하려면 어떻게 해야 합니까?

DDD
풀어 주다: 2024-11-02 11:20:02
원래의
270명이 탐색했습니다.

How Can I Prevent Image Dragging on an HTML Page?

HTML 페이지에서 이미지 드래그 비활성화

웹 페이지에 이미지를 통합할 때 사용자가 이미지를 드래그 앤 드롭하는 것을 방지하는 것이 바람직한 경우가 많습니다. 이 기사에서는 이 문제를 해결하는 솔루션을 자세히 설명합니다.

이미지 드래그를 비활성화하려면 ondragstart 이벤트를 사용할 수 있습니다. 지정된 이미지에 대해 false를 반환하도록 이 이벤트를 설정하면 드래그가 효과적으로 비활성화됩니다.

document.getElementById('my-image').ondragstart = function() { return false; };
로그인 후 복사

이 코드는 ID(이 경우 my-image)를 기준으로 HTML 요소에 ondragstart 이벤트를 할당합니다. 사용자가 이미지 드래그를 시작하면 이벤트가 트리거되고 return false 문이 기본 드래그 앤 드롭 동작을 방지합니다.

jQuery를 사용하는 경우 약간 다른 접근 방식을 사용할 수 있습니다.

$('img').on('dragstart', function(event) { event.preventDefault(); });
로그인 후 복사

이 코드는 모든 에 대한 dragstart 이벤트에 콜백 함수를 바인딩합니다. 페이지의 요소. 이미지를 드래그하면 jQuery는 event.preventDefault()를 호출하여 드래그 기능을 억제합니다.

위 내용은 HTML 페이지에서 이미지 드래그를 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿