커서를 잡기위한 CSS (드래그 앤 드롭)
답변:
내 생각 엔 move아마 가장 가까운 것 표준 커서 값 당신이 무슨 일을하는지에 대한 :
이동
무언가를 움직일 것을 나타냅니다.
1
이동 아이콘을 보았는데, 그랩 아이콘이 더 좋다고 생각했습니다. 그러나 w3c는 커서가 "무엇을 움직여야하는지 나타냅니다"라고 생각합니다. 감사.
—
.
@at : 쉼표로 구분 된 목록에 여러 개의 커서를 지정할 수 있으며 사용자 에이전트는 가장 먼저 이해하는 것을 사용해야합니다. 따라서 -moz *를 사용하고 대체로 "이동"할 수 있습니다.
—
mu는 너무 짧습니다.
@muistooshort 쉼표 목록이 여전히 작동합니까? 나는
—
Bob Stein이
cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;가장 선호하는 마지막으로 사용 하고 있습니다.
@ BobStein-VisiBone : 몇 년 전에 혼란이 있었을 것 같습니다. 여러 지정하는 경우 AFAIK는 쉼표 목록 작동 형식이 같은
—
mu는 너무 짧습니다
cursor: url(example.svg#linkcursor), url(hyper.cur), pointer여러 가능한 값보다는. 당신이 접근해야 할 것 같아요.
다른 사람 이이 질문을 우연히 발견 한 경우 아마도 이것이 당신이 찾고있는 것일 것입니다.
.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;
}
어떤 이유로 든 '잡기'는 마우스를 놓을 때만 나타납니다. 이것이 왜 그런지 아십니까?
—
Jona
@ Jona 내 생각에 잡을
—
Emile Bergeron
grabbable수있는 요소에 클래스를 추가하지 않았으며 드래그 할 때 클래스를 토글하고 있습니다.
추가 "잡기"비트를 추가해 주셔서 감사합니다. 좋은 터치. :)
—
scotself
이 솔루션에 문제가있는 사람 은 일반 선택기 대신에 위의 예와 같이
—
Markus Amalthea Magnuson
grab커서 를 설정해야했습니다 . :hover.grabbable:hover
부모에게 이러한 스타일을 추가 @Jona
—
아서 Tarasov
<ul>대신 <li>내 경우에는 문제 해결
CSS3 grab 이며 grabbing이제에 대한 값이 허용됩니다 cursor. 사용자 정의 커서 파일을 포함하여 브라우저 간 호환성 3에 대한 몇 가지 폴백을 제공하기 위해 완전한 솔루션은 다음과 같습니다.
.draggable {
cursor: move; /* fallback: no `url()` support or images disabled */
cursor: url(images/grab.cur); /* fallback: Internet Explorer */
cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
cursor: -moz-grab; /* Firefox 1.5-26 */
cursor: grab; /* W3C standards syntax, should come least */
}
.draggable:active {
cursor: url(images/grabbing.cur);
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}2019-10-07 업데이트 :
.draggable {
cursor: move; /* fallback: no `url()` support or images disabled */
cursor: url(images/grab.cur); /* fallback: Chrome 1-21, Firefox 1.5-26, Safari 4+, IE, Edge 12-14, Android 2.1-4.4.4 */
cursor: grab; /* W3C standards syntax, all modern browser */
}
.draggable:active {
cursor: url(images/grabbing.cur);
cursor: grabbing;
}
@ user2230470 두 가지 중요한 점이 다릅니다. 첫째, 브라우저 이미지를 지원하지 않고 커서 이미지를 제공합니다
—
Volker E.
grab. 둘째, 공급 업체 접두사 값 뒤에 표준 구문 을 사용 하는 것이 가장 좋습니다 .
@ user2230470-브라우저가 표준 동작을 마무리하기 전에 약간 접두사가 붙었을 수도 있고 다르게 동작 할 수도있는 두 가지 동작을 지원하는 경우 표준 동작을 사용하기를 원합니다. 마지막은 브라우저가 사용하는 것입니다. 따라서 표준이 마지막에 가야합니다.
—
Jimbo Jonny
이다
—
Jon z
images/grab.cur예를 들어 URL이 내 웹 서버에 호스트 할 필요가 있다는 이미지, 또는 마법 IE의 일이?
CSS 커서보다 "사용자 정의"는 일부 유형의 플러그인을 의미하지만 CSS를 사용하여 커서를 완전히 지정할 수 있습니다. 이 목록에는 원하는 것이 있다고 생각합니다.
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(https://www.w3schools.com/cssref/myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}<h1>The cursor Property</h1>
<p>Hover mouse over each to see how the cursor looks</p>
<p class="alias">cursor: alias</p>
<p class="all-scroll">cursor: all-scroll</p>
<p class="auto">cursor: auto</p>
<p class="cell">cursor: cell</p>
<p class="context-menu">cursor: context-menu</p>
<p class="col-resize">cursor: col-resize</p>
<p class="copy">cursor: copy</p>
<p class="crosshair">cursor: crosshair</p>
<p class="default">cursor: default</p>
<p class="e-resize">cursor: e-resize</p>
<p class="ew-resize">cursor: ew-resize</p>
<p class="grab">cursor: grab</p>
<p class="grabbing">cursor: grabbing</p>
<p class="help">cursor: help</p>
<p class="move">cursor: move</p>
<p class="n-resize">cursor: n-resize</p>
<p class="ne-resize">cursor: ne-resize</p>
<p class="nesw-resize">cursor: nesw-resize</p>
<p class="ns-resize">cursor: ns-resize</p>
<p class="nw-resize">cursor: nw-resize</p>
<p class="nwse-resize">cursor: nwse-resize</p>
<p class="no-drop">cursor: no-drop</p>
<p class="none">cursor: none</p>
<p class="not-allowed">cursor: not-allowed</p>
<p class="pointer">cursor: pointer</p>
<p class="progress">cursor: progress</p>
<p class="row-resize">cursor: row-resize</p>
<p class="s-resize">cursor: s-resize</p>
<p class="se-resize">cursor: se-resize</p>
<p class="sw-resize">cursor: sw-resize</p>
<p class="text">cursor: text</p>
<p class="url">cursor: url</p>
<p class="w-resize">cursor: w-resize</p>
<p class="wait">cursor: wait</p>
<p class="zoom-in">cursor: zoom-in</p>
<p class="zoom-out">cursor: zoom-out</p>
닫힌 손 모양 커서가 16x16이 아닙니다. 동일한 크기로 필요한 경우 16x16 픽셀의 두 가지가 있습니다.
또는 원래 커서가 필요한 경우 :
https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur