All geek questions in one place

How to prevent the "I-Beam" cursor when a user drags an object onto my page

It can be hard to describe without copying and pasting a ton of code here, but I will try.

I needed to create a custom draggable object using javascript - I used jquery in the past, but it did not work for this project. I mainly work, except when the user clicks on an object (DIV) and drags it around the page, his or her cursor goes into the classic i-beam text selector.

No matter what I try, I cannot turn off this cursor. I tried to put something like.

this.style.cursor = 'pointer';

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

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

I think what I'm really looking for is a way to temporarily disable the i-beam cursor appearing on my page altogether.

Ok, thanks for any help.

+3
source share
4 answers

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

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

. html5 .

+5
$('#canvas').mousedown(function(){          
    $(this).css('cursor','move');
    return false;       
});

canvas.onselectstart .

+3

It depends on what content is under the cursor while dragging and dropping.

One thing that may work for you is to set all children on cursor: pointer.

.dragging * { cursor: pointer !important }
+2
source

This worked fine, but not very good for me. It may or may not work better with your drag control. Perhaps you can try to set the cursor style the same way 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>
0
source

Source: https://habr.com/ru/post/1781867/

More articles:


All Articles