CODEWITHSUNDEEP
javascripthtmldrag-and-drop
Alex Ivasyuv
Alex Ivasyuv

Reputation: 8824

HTML5 Drag & Drop Change icon/cursor while dragging

I'm wondering how to change during dragging (dragover/dragenter) icon/cursor when I dragenter for example to deny or allow section. Of course, I can move with cursor a part of DOM positioned absolutely, but I'm interested in native HTML5 solution.

Thanks!

Upvotes: 86

Views: 151817

Answers (7)

Robb Hoff
Robb Hoff

Reputation: 1910

preventDefault() needs to go on the target element. This line attached to the document finally took care of it for me

document.addEventListener("dragover", (event) => {
    event.preventDefault();
});

Upvotes: 5

ShaMan123
ShaMan123

Reputation: 119

The accepted answer works if and only if ev.preventDefault() is called on all events changing the dropEffect (don't call it in dragstart) as described in MDN

Upvotes: 3

zyrup
zyrup

Reputation: 717

This worked for me:

<div class="container">
    <div draggable="true">
    <div draggable="true">
</div>

$('.container').bind('dragover', function() {
    $('body').addClass('dragging');
});
$('.container').bind('dragleave', function() {
    $('body').removeClass('dragging');
});

.container > div {
    cursor: grab;
}
body.dragging .container > div {
    cursor: grabbing;
}

https://jsfiddle.net/cLb3hxtf/1/

Upvotes: 0

zupa
zupa

Reputation: 13412

You are after dropEffect:

Initialize it in dragstart:

event.dataTransfer.effectAllowed = "copyMove";

Update it in dragenter:

event.dataTransfer.dropEffect = "copy";

Upvotes: 50

Kurkula
Kurkula

Reputation: 6762

Adding pure css solution, which may be useful for few folks. Use this class on the html element.

.grab {
        cursor: move;
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
        .thumbnails-list{
            cursor: pointer;
        }
    }

    .grab:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }

Upvotes: 3

eduedu87
eduedu87

Reputation: 54

I was trying to achieve the same and couldn't really find a nice solution. What I did in the end was setting an image to the dataTransfer and change its src with every action. That way the behavior is consistent across browsers at least. Here's a link to a page that I used as a reference:

https://kryogenix.org/code/browser/custom-drag-image.html

Upvotes: 2

T. Junghans
T. Junghans

Reputation: 11683

I have a standalone crossbrowser HTML5 drag and drop example here: http://jsfiddle.net/rvRhM/1/

Have a look at the dragstart and dragend events. dm is the element being dragged.

EventUtil.addHandler(dm, 'dragstart', function(e) {
    e.dataTransfer.setData(format, 'Dragme');
    e.dataTransfer.effectAllowed = effect;
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = 'blue';
    target.style.cursor = 'move'; // You can do this or use a css class to change the cursor
    return true;
});

Be sure the reset the cursor when dragging ends:

EventUtil.addHandler(dm, 'dragend', function(e) {  
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = '';
    target.style.cursor = 'default'; // Reset cursor
    return true;
});

Upvotes: 17

Related Questions