Question

This might be hard to describe without copying and pasting a ton of code here, but I’ll try.

I had to build a custom draggable object using javascript- I’ve used jquery in the past but it didn’t work for this project. I’ve got it mostly working, except for when a user clicks on the object (a DIV) and drags it across the page, his or her cursor changes into the classic i-beam text selector.

No matter what I try, I can’t disable this cursor. I’ve tried putting something like.

this.style.cursor = 'pointer';  

in the ‘onmousedown’ function of the div in question, but as soon as you start to drag, blammo, you have an i-beam cursor. The same is true if I put the above code in the actual dragging function.

I’ve tried disabling text selection in the whole document using css(not an actually solution, as I want people to be able to copy/paste on this site, but just to see if it works) and still, the cursor changes while the user drags.

I guess what I’m really looking for is a way to temporarily disable that i-beam cursor from appearing on my page at all.

Well, thanks in advance for any help.

Answer 1

The correct way to do this (works on Chrome, at least):

var canvas = $('canvas')[0]
canvas.onselectstart = function () { return false; }

See html5 canvas hand cursor problems.