Sto cercando di riprodurre il modo in cui GMail gestisce gli allegati di trascinamento/rilascio html5 - dove non appena trascini i file sulla pagina, visualizza un nuovo elemento per per lasciarli cadere. Ho capito bene quella parte (non era così semplice come pensavo sarebbe).Modifica del puntatore del mouse per i file di trascinamento HTML5 (Goccia di trascinamento di GMail)
Ora sto cercando di perfezionarlo cambiando il cursore del mouse quando il mouse si trova su qualsiasi altro elemento oltre all'elemento di rilascio, per dire che l'utente non è stato lasciato cadere qui. Immagino di poterlo fare con un cursore personalizzato, ma questo non sembra essere ciò che GMail sta facendo. The spec suggerirebbe che è possibile cambiare anche il cursore del mouse, ma non riesco a farlo funzionare correttamente, usando dropzone/effectAllowed.
Qualsiasi aiuto sarebbe apprezzato, qui è la mia messa a punto corrente: http://jsfiddle.net/guYWx/1/
ETA: Ecco quello che ho finito con: 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;">-> drop here <-</div>
<div id="d2" style="border: 1px solid black;">and stuff will happen</div>
<div style="float: left;">mouse them all over </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>
Ciao, ho combattuto con me stesso per ore. Il tuo codice funziona molto più bene del mio. Puoi spiegare a cosa serve il ritardo di timeout sul reset? – benb
Previene i falsi positivi per l'evento di trascinamento. Quando si associa il trascinamento/trascinamento a un elemento con un gruppo di elementi secondari, gli eventi si attivano quando si passa il mouse da un elemento secondario a un elemento secondario. Ho sostituito il timeout con una chiamata a 'reset', in modo che tu possa vedere quanto è brutto quando si trascina su: http://jsfiddle.net/guYWx/20/ (un sacco di nascondere/mostrare in Chrome). – Langdon