HTML 요소에서 드래그 앤 드롭을 방지하려면 어떻게 해야 합니까?

HTML 요소에서 드래그 앤 드롭 금지: 포괄적인 솔루션

윈도우 시스템을 사용하여 복잡한 웹 애플리케이션을 개발하는 동안 가끔 발생할 수 있는 문제 방해. 특히, 브라우저의 기본 끌어서 놓기 동작은 의도한 크기 조정 작업을 방해할 수 있습니다. 이 문제를 극복하려면 다음 솔루션을 사용하는 것이 좋습니다.

특정 요소에 대한 드래그 앤 드롭 비활성화

드래그스타트 및 온드롭 시 HTML 이벤트를 활용하여 드래그를 비활성화할 수 있습니다. - 특정 HTML 요소 내에 드롭합니다. 다음 속성을 관련 요소에 통합합니다.

<div>
<p>또는 전체 문서 본문에 대해 비활성화하여 원할 때 다시 활성화할 수 있습니다.</p>
<pre class="brush:php;toolbar:false">

jQuery 해결책

jQuery를 사용하여 동일한 결과를 얻으려면 draggable()을 사용할 수 있습니다. 방법:

$(document).ready(function() {
  $('#draggable').draggable({
    disabled: true
  });
});

동적 활성화/비활성화

드래그 앤 드롭 기능을 동적으로 전환해야 하는 시나리오의 경우 활성화() 및 비활성화 활용을 고려하세요. () jQuery의 메소드:

$('#draggable').draggable('disable');
...
$('#draggable').draggable('enable');

포괄적 기능

이 접근 방식은 사용자가 마우스 버튼을 누르고 있는 동안 브라우저 텍스트 선택 및 끌어서 놓기를 효과적으로 비활성화합니다. 마우스 버튼을 놓으면 기능이 복원됩니다. 보다 세밀한 제어를 위해 드래그 앤 드롭이 비활성화된 요소를 지정할 수 있습니다.