여러 브라우저에서 일관된 드래그 앤 드롭 커서 동작을 달성하려면 어떻게 해야 합니까?

브라우저 간 드래그 앤 드롭 호환성을 위한 CSS 커서

화면에서 요소를 드래그 앤 드롭하는 JavaScript 웹 애플리케이션을 디자인할 때 드래그 가능한 개체 위에 마우스를 올려 놓았을 때 커서가 적절하게 변경되는지 확인하는 데 필수적입니다. Mozilla의 Firefox 브라우저는 이러한 목적으로 전용 CSS 커서(-moz-grab 및 -moz-grabbing)를 제공합니다.

그러나 이러한 커서는 Firefox 전용입니다. 다양한 브라우저에서 일관된 사용자 경험을 제공하려면 대안을 고려해야 합니다.

간단한 해결책은 표준 "이동" 커서를 대체 수단으로 사용하고 이를 -webkit-grab 및 -moz와 결합하는 것입니다. - 커서를 잡아. 이렇게 하면 모든 브라우저의 사용자가 요소를 드래그하고 이동하려고 시도하는 동안 적절한 커서를 볼 수 있습니다. 또한 선택적으로 -moz-grabbing 및 -webkit-grabbing 커서를 포함하여 드래그 작업 중에 "닫힌 손" 커서를 표시할 수 있습니다.

다음 코드 조각은 구현을 보여줍니다.

<code class="CSS">.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}</code>

위 내용은 여러 브라우저에서 일관된 드래그 앤 드롭 커서 동작을 달성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!