HTML5 Arrastar e soltar Alterar o ícone / cursor enquanto arrasta

Eu estou querendo saber como mudar durante o arrastar (dragover / dragenter) ícone / cursor quando eu arraste por exemplo para negar ou permitir seção. Claro, eu posso mover com o cursor uma parte do DOM posicionado absolutamente, mas estou interessado em solução HTML5 nativa.

Obrigado!

Você está após o dropEffect :

Inicialize-o no dragstart:

event.dataTransfer.effectAllowed = "copyMove"; 

Atualize-o no dragenter:

 event.dataTransfer.dropEffect = "copy"; 

Eu tenho um exemplo de arrastar e soltar HTML5 de crossbrowser autônomo aqui: http://jsfiddle.net/rvRhM/1/

Dê uma olhada no dragstart e arraste events. dm é o elemento sendo arrastado.

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

Certifique-se de reiniciar o cursor ao arrastar termina:

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

Adicionando solução CSS pura, que pode ser útil para algumas pessoas. Use essa class no elemento 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; } 

Eu estava tentando alcançar o mesmo e não consegui realmente encontrar uma boa solução. O que eu fiz no final foi definir uma imagem para o dataTransfer e mudar seu src com cada ação. Dessa forma, o comportamento é consistente em todos os navegadores, pelo menos. Aqui está um link para uma página que eu usei como referência:

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