Modification du curseur de la souris pour les fichiers glisser-déplacer HTML5 (glisser-déposer GMail)

Je suis en train d'essayer de reproduire la façon dont GMail gère le html5 glisser/déposer les pièces jointes -- où dès que vous faites glisser les fichiers sur la page, il affiche un élément nouveau pour vous pour les laisser tomber sur. Je suis partie a fonctionné (il n'était pas aussi simple que je le pensais).

Maintenant, je suis en train de polir en changeant le curseur de la souris lorsque la souris est au-dessus de tout autre élément autre que la chute de l'élément, pour dire à l'utilisateur de déposer n'est pas autorisé ici. J'imagine que je peux le faire avec un curseur personnalisé, mais qui ne semble pas être ce que GMail est en train de faire. La spec suggère qu'il est possible de changer le curseur de la souris en tant que bien, mais je n'arrive pas à faire fonctionner le droit, à l'aide de dropzone/effectAllowed.

Toute aide serait appréciée, voici ma configuration actuelle: http://jsfiddle.net/guYWx/1/

ETA: Voici ce que j'ai: http://jsfiddle.net/guYWx/16/

<body style="border: 1px solid black;">
<div id="d0" style="border: 1px solid black;">drag files onto this page</div>
<div id="d1" style="border: 1px solid black; display: none; background-color: red;">-&gt; drop here &lt;-</div>
<div id="d2" style="border: 1px solid black;">and stuff will happen</div>
<div style="float: left;">mouse them all over&nbsp;</div>
<div style="float: left;">these elements</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div>end page</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var resetTimer;
var reset = function()
{
$('#d1').hide();
};
var f = function(e)
{
var srcElement = e.srcElement? e.srcElement : e.target;
if ($.inArray('Files', e.dataTransfer.types) > -1)
{
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = (srcElement.id == 'd1') ? 'copy' : 'none';
if (e.type == "dragover")
{
if (resetTimer)
{
clearTimeout(resetTimer);
}
$('#d1').show();
console.info('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.types is ' + e.dataTransfer.types + '\n\ne.dataTransfer.files.length is ' + e.dataTransfer.files.length);
}
else if (e.type == "dragleave")
{
resetTimer = window.setTimeout(reset, 25);
}
else if (e.type == "drop")
{
reset();
alert('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));
}
}
};
document.body.addEventListener("dragleave", f, false);
document.body.addEventListener("dragover", f, false);
document.body.addEventListener("drop", f, false);
</script>

source d'informationauteur Langdon

  1. 26

    Fait un peu de creuser par le biais de la source et a constaté que vous êtes censé définir event.dataTransfer.dropEffect = 'move'; à l'intérieur de votre dragover gestionnaire d'événement. Googlé pour dropEffect pour en savoir plus et trouver:

    dataTransfer.dropEffect

    Contrôle les commentaires que l'utilisateur est donné lors de l'dragenter et
    dragover événements. Lorsque l'utilisateur survole un élément cible, la
    navigateur curseur indique ce type d'opération va prendre
    lieu (par exemple une copie, déplacement, etc.). L'effet peut prendre l'une de l'
    valeurs suivantes: none, de copie, de lien, de se déplacer.

    à partir de: http://www.html5rocks.com/en/tutorials/dnd/basics/

    Edit: Voici ce que j'ai: http://jsfiddle.net/guYWx/16/

    Eu à faire un truc pour qu'il fonctionne parfaitement. L'a fait pour le compte-gouttes ne s'affiche pas lorsque vous sélectionnez du texte et faites-le glisser autour de la page:

    if ($.inArray('Files', e.dataTransfer.types) > -1)
  2. 4

    @Langdon - Merci de remarquer exactement ce dont j'avais besoin! J'ai upvoted.

    Après avoir passé de nombreuses heures, j'ai reçu cette suggestion de travailler exactement comme prévu.

    J'ai fait usage de effectAllowed en combinaison avec dropEffect à fournir des repères visuels lors de l'exécution de glisser-déposer des opérations. Complètement croix-navigateur!

    $(document).on('dragstart dragenter dragover', function(event) {    
//Only file drag-n-drops allowed, http://jsfiddle.net/guYWx/16/
if ($.inArray('Files', event.originalEvent.dataTransfer.types) > -1) {
//Needed to allow effectAllowed, dropEffect to take effect
event.stopPropagation();
//Needed to allow effectAllowed, dropEffect to take effect
event.preventDefault();
$('.dropzone').addClass('dropzone-hilight').show();     //Hilight the drop zone
dropZoneVisible= true;
//http://www.html5rocks.com/en/tutorials/dnd/basics/
//http://api.jquery.com/category/events/event-object/
event.originalEvent.dataTransfer.effectAllowed= 'none';
event.originalEvent.dataTransfer.dropEffect= 'none';
//.dropzone .message
if($(event.target).hasClass('dropzone') || $(event.target).hasClass('message')) {
event.originalEvent.dataTransfer.effectAllowed= 'copyMove';
event.originalEvent.dataTransfer.dropEffect= 'move';
} 
}
}).on('drop dragleave dragend', function (event) {  
dropZoneVisible= false;
clearTimeout(dropZoneTimer);
dropZoneTimer= setTimeout( function(){
if( !dropZoneVisible ) {
$('.dropzone').hide().removeClass('dropzone-hilight'); 
}
}, dropZoneHideDelay); //dropZoneHideDelay= 70, but anything above 50 is better
});
  3. -3

    Vous devez changer cursor propriété CSS.

    Vous trouverez une liste des différentes valeurs de cursor ici.

    Vous pouvez également spécifier un curseur personnalisé de l'image avec cursor: url('foo.png');.