12
GMailがhtml5ドラッグアンドドロップアタッチメントを処理する方法を再現しようとしています - ファイルをページ上にドラッグするとすぐにあなたはそれらを落とす。私はその部分を取り除いた（私はそれがそうであると思ったようにまっすぐではなかった）。HTML5ドラッグドロップファイルのマウスカーソルを変更する（GMailドラッグドロップ）
ここでは、マウスがdrop要素以外の要素の上にあるときにマウスカーソルを変更して、ドロップを許可しないユーザーに通知するようにしています。私はカスタムカーソルでそれを行うことができると思いますが、それはGMailがやっているようには見えません。 The specでも、マウスカーソルを変更することは可能ですが、dropzone/effectAllowedを使用して正しく動作させるようには見えません。
任意の助けをいただければ幸い、ここに私の現在の設定です：http://jsfiddle.net/guYWx/1/
ETA：ここに私がなってしまったものです：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>
こんにちは、私は何時間もこの自分と戦ってきました。あなたのコードはもっとうまく機能しています。リセットのタイムアウトの遅延の目的を説明できますか？ – benb
dragleaveイベントの誤検出を防止します。 dragover/dragleaveを複数のサブ要素を持つ要素にバインドすると、サブ要素からサブ要素にマウスを移動するとイベントが発生します。私はtimeoutを 'reset'の呼び出しで置き換えたので、あなたはhttp://jsfiddle.net/guYWx/20/（Chromeでたくさんの隠れている/表示している）をドラッグすると悪いことがわかります。 – Langdon