CSS for grabbing cursors drag drop

Question

I have a JavaScript webapp where the user needs to grab the background to move the whole screen around. So I want the cursor to change when they're hovering over the background. The -moz-grab and -moz-grabbing CSS cursors are ideal for this. Of course, they only work in Firefox... are there equivalent cursors for other browsers? Do I have to do something a little more custom than standard CSS cursors?

This question is related to css cursor

User · Answer

CSS3 grab and grabbing are now allowed values for cursor   In order to provide several fallbacks for cross-browser compatibility3 including custom cursor files  a complete solution would look like this    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      Update 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

User · Answer

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

User · Answer

You can create your own cursors and set them as the cursor using cursor  url  path-to-your-cursor     or find Firefox s and copy them  bonus  a nice consistent look in every browser

User · Answer

In case anyone else stumbles across this question  this is probably what you were looking for    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

User · Answer

more custom  than CSS cursors means a plugin of some type  but you can totally specify your own cursors using CSS   I think this list has what you want    x000D   x000D   alias  cursor  alias   x000D   all-scroll  cursor  all-scroll   x000D   auto  cursor  auto   x000D   cell  cursor  cell   x000D   context-menu  cursor  context-menu   x000D   col-resize  cursor  col-resize   x000D   copy  cursor  copy   x000D   crosshair  cursor  crosshair   x000D   default  cursor  default   x000D   e-resize  cursor  e-resize   x000D   ew-resize  cursor  ew-resize   x000D   grab  cursor  grab   x000D   grabbing  cursor  grabbing   x000D   help  cursor  help   x000D   move  cursor  move   x000D   n-resize  cursor  n-resize   x000D   ne-resize  cursor  ne-resize   x000D   nesw-resize  cursor  nesw-resize   x000D   ns-resize  cursor  ns-resize   x000D   nw-resize  cursor  nw-resize   x000D   nwse-resize  cursor  nwse-resize   x000D   no-drop  cursor  no-drop   x000D   none  cursor  none   x000D   not-allowed  cursor  not-allowed   x000D   pointer  cursor  pointer   x000D   progress  cursor  progress   x000D   row-resize  cursor  row-resize   x000D   s-resize  cursor  s-resize   x000D   se-resize  cursor  se-resize   x000D   sw-resize  cursor  sw-resize   x000D   text  cursor  text   x000D   url  cursor  url https   www w3schools com cssref myBall cur  auto   x000D   w-resize  cursor  w-resize   x000D   wait  cursor  wait   x000D   zoom-in  cursor  zoom-in   x000D   zoom-out  cursor  zoom-out   x000D   lt h1 gt The cursor Property lt  h1 gt  x000D   lt p gt Hover mouse over each to see how the cursor looks lt  p gt  x000D   x000D   lt p class  alias  gt cursor  alias lt  p gt  x000D   lt p class  all-scroll  gt cursor  all-scroll lt  p gt  x000D   lt p class  auto  gt cursor  auto lt  p gt  x000D   lt p class  cell  gt cursor  cell lt  p gt  x000D   lt p class  context-menu  gt cursor  context-menu lt  p gt  x000D   lt p class  col-resize  gt cursor  col-resize lt  p gt  x000D   lt p class  copy  gt cursor  copy lt  p gt  x000D   lt p class  crosshair  gt cursor  crosshair lt  p gt  x000D   lt p class  default  gt cursor  default lt  p gt  x000D   lt p class  e-resize  gt cursor  e-resize lt  p gt  x000D   lt p class  ew-resize  gt cursor  ew-resize lt  p gt  x000D   lt p class  grab  gt cursor  grab lt  p gt  x000D   lt p class  grabbing  gt cursor  grabbing lt  p gt  x000D   lt p class  help  gt cursor  help lt  p gt  x000D   lt p class  move  gt cursor  move lt  p gt  x000D   lt p class  n-resize  gt cursor  n-resize lt  p gt  x000D   lt p class  ne-resize  gt cursor  ne-resize lt  p gt  x000D   lt p class  nesw-resize  gt cursor  nesw-resize lt  p gt  x000D   lt p class  ns-resize  gt cursor  ns-resize lt  p gt  x000D   lt p class  nw-resize  gt cursor  nw-resize lt  p gt  x000D   lt p class  nwse-resize  gt cursor  nwse-resize lt  p gt  x000D   lt p class  no-drop  gt cursor  no-drop lt  p gt  x000D   lt p class  none  gt cursor  none lt  p gt  x000D   lt p class  not-allowed  gt cursor  not-allowed lt  p gt  x000D   lt p class  pointer  gt cursor  pointer lt  p gt  x000D   lt p class  progress  gt cursor  progress lt  p gt  x000D   lt p class  row-resize  gt cursor  row-resize lt  p gt  x000D   lt p class  s-resize  gt cursor  s-resize lt  p gt  x000D   lt p class  se-resize  gt cursor  se-resize lt  p gt  x000D   lt p class  sw-resize  gt cursor  sw-resize lt  p gt  x000D   lt p class  text  gt cursor  text lt  p gt  x000D   lt p class  url  gt cursor  url lt  p gt  x000D   lt p class  w-resize  gt cursor  w-resize lt  p gt  x000D   lt p class  wait  gt cursor  wait lt  p gt  x000D   lt p class  zoom-in  gt cursor  zoom-in lt  p gt  x000D   lt p class  zoom-out  gt cursor  zoom-out lt  p gt  x000D   x000D   x000D    Source  CSS cursor Property   W3Schools

User · Answer

I think move would probably be the closest standard cursor value for what you re doing      move   Indicates something is to be moved

User · Answer

I may be late  but you can try the following code  which worked for me for Drag and Drop    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

[css] CSS for grabbing cursors (drag & drop)

The answer is

Examples related to css

Examples related to cursor

Tags