web-dev-qa-db-fra.com

Icône / curseur HTML5 Drag & Drop Change tout en faisant glisser

Je me demande comment changer pendant le glisser (dragover/dragenter) icône/curseur lorsque je fais glisser 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 native HTML5.

Merci!

javascripthtml5drag-and-drop
39
Alex Ivasyuv

Vous êtes après dropEffect :

Initialisez-le dans dragstart:

event.dataTransfer.effectAllowed = "copyMove";

Mettez-le à jour dans dragenter:

event.dataTransfer.dropEffect = "copy";
25
zupa

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

Jetez un œil aux événements dragstart et dragend. dm est l'élément que vous faites glisser.

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 à la fin du glissement:

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

Ajout d'une solution CSS pure, qui peut être utile pour quelques personnes. 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;
    }
4
Kurkula

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

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

1
eduedu87