How to prevent 'I-Beam' cursor when user drags object on my page
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' funct开发者_开发技巧ion 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.
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.
$('#canvas').mousedown(function(){
$(this).css('cursor','move');
return false;
});
canvas.onselectstart does not exit.
This depends what content is under the cursor at the time of dragging.
One thing that might work for you is to set all children to cursor: pointer.
.dragging * { cursor: pointer !important }
This worked OK but not great for me. It may or may not work better with your draggable control. Perhaps you can try setting the cursor style the same in all mouse events?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mouseDown = false;
$(document).ready(function() {
$('#dragArea').mousemove(function(e) {
if (mouseDown) {
this.style.cursor = 'pointer';
} else {
this.style.cursor = 'default';
}
});
$('#dragArea').mousedown(function() { mouseDown = true; this.style.cursor = 'pointer'; });
$('#dragArea').mouseup(function() { mouseDown = false; this.style.cursor = 'default'; });
$('#pageBody').mousemove(function() { this.style.cursor = 'default'; });
});
</script>
</head>
<body id="pageBody">
<div id="dragArea" style="height:200px;width:200px;border:solid 1px red;">
</div>
</body>
</html>
加载中,请稍侯......
精彩评论