HTML5 Drag & Drop Changer l'icône/le curseur pendant le glissement

Question

Je me demande comment changer pendant le glissement (dragover/dragover) l'icône/le curseur lorsque je dragenter par exemple pour refuser ou autoriser la section. Bien sûr, je peux déplacer avec le curseur une partie du DOM positionnée de manière absolue, mais je suis intéressé par la solution HTML5 native.

Merci!

Answer 1

Vous recherchezdropEffet :

Initialisez-le dans dragstart :

 event.dataTransfer.effectAllowed = "copyMove";

Mettez-le à jour dans dragenter :

 event.dataTransfer.dropEffect = "copy";

Answer 2

J'ai un exemple de glisser-déposer HTML5 crossbrowser autonome ici : http://jsfiddle.net/rvRhM/1/

Jetez un œil aux événements dragstart et dragend. dm est l'élément déplacé.

 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;
});

Assurez-vous de réinitialiser le curseur lorsque le déplacement se termine :

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

Answer 3

Ajout d'une solution css pure, ce qui peut être utile pour peu de gens. Utilisez cette classe sur l'élément html.

 .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;
    }

Answer 4

J'essayais de faire la même chose et je n'arrivais pas vraiment à trouver une bonne solution. Ce que j'ai fait à la fin, c'est de définir une image sur le dataTransfer et de changer son src à chaque action. De cette façon, le comportement est cohérent au moins sur tous les navigateurs. Voici un lien vers une page que j'ai utilisé comme référence:

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

Answer 5

Cela a fonctionné pour moi:

 <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;
}