커서를 잡기위한 CSS (드래그 앤 드롭)
사용자가 전체 화면을 움직이기 위해 배경을 가져와야하는 JavaScript webapp가 있습니다. 배경 위에 마우스를 올리면 커서가 변경되기를 원합니다. -moz-grab
및 -moz-grabbing
CSS 커서는이 이상적입니다. 물론, 그들은 Firefox에서만 작동합니다 ... 다른 브라우저에 해당하는 커서가 있습니까? 표준 CSS 커서보다 약간 더 사용자 정의해야합니까?
내 생각 엔 move
아마 가장 가까운 것 표준 커서 값 당신이 무슨 일을하는지에 대한 :
이동
무언가를 움직일 것을 나타냅니다.
다른 사람 이이 질문을 우연히 발견 한 경우 아마도 이것이 당신이 찾고있는 것일 것입니다.
.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;
}
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;
}
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>
자신 만의 커서를 만들고를 사용하여 커서로 설정 cursor: url('path-to-your-cursor');
하거나 Firefox를 찾아 복사 할 수 있습니다 (보너스 : 모든 브라우저에서 일관된 모양).
늦었을 수도 있지만 드래그 앤 드롭에 도움이되는 다음 코드를 사용해 볼 수 있습니다.
.dndclass{
cursor: url('../images/grab1.png'), auto;
}
.dndclass:active {
cursor: url('../images/grabbing1.png'), auto;
}
You can use the images below in the URL above. Make sure it is a PNG transparent image. If not, download one from google.
The closed hand cursor is not 16x16. If you would need them in the same dimensions, here you have both of them in 16x16 px
Or if you need original cursors:
https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur
참고URL : https://stackoverflow.com/questions/5697067/css-for-grabbing-cursors-drag-drop
'Programing' 카테고리의 다른 글
virtualenv에서 환경 변수 설정 (0) | 2020.06.13 |
---|---|
appCompat 22.1 이상에서 새로운 AlertDialog를 사용하고 스타일을 지정하는 방법 (0) | 2020.06.13 |
조건 A가 일치하면 조치 C를 수행하기 위해 조건 B를 일치시켜야합니다. (0) | 2020.06.13 |
슬러그 (URL 문자열)를 만드는 PHP 함수 (0) | 2020.06.13 |
'구문 분석'의 반대말은 무엇입니까? (0) | 2020.06.13 |