更改HTML5拖放文件的鼠标光标(GMail拖放)

Question

更改HTML5拖放文件的鼠标光标(GMail拖放)

我正在尝试重现GMail处理html5拖放附件的方式 - 只要您在页面上拖动文件,它就会显示一个新元素供您放置.我得到了那个部分(它没有像我想象的那样直截了当).

现在我试图通过在鼠标悬停在除drop元素之外的任何其他元素上时更改鼠标光标来对其进行修改,以告知用户此处不允许丢弃.我想我可以使用自定义光标来完成它,但这似乎不是GMail正在做的事情. 该规范建议也可以更改鼠标光标,但我似乎无法使用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;">-&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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Lan*_*don 28

有人挖掘了一下源,发现你应该event.dataTransfer.dropEffect = 'move';在你的dragover事件处理程序中设置.谷歌搜索dropEffect阅读更多,发现:

dataTransfer.dropEffect

控制在dragenter和dragover事件期间给予用户的反馈.当用户将鼠标悬停在目标元素上时,浏览器的光标将指示将要发生的操作类型(例如,复制,移动等).效果可以采用以下值之一:none,copy,link,move.

来自:http://www.html5rocks.com/en/tutorials/dnd/basics/

编辑:这是我最终的结果:http://jsfiddle.net/guYWx/16/

不得不做一个额外的技巧,让它完美地工作.这样做,这样当您选择文本并将其拖动到页面时,滴管就不会出现:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，10 月前
查看次数：	16553 次
最近记录：	12 年，1 月前