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

2022-01-11 00:00:00 drag-and-drop html

我正在尝试重现 GMail 处理 html5 拖放附件的方式——只要您将文件拖到页面上，它就会显示一个新元素供您放置它们.我解决了这部分问题(它并不像我想象的那么简单).

I'm trying to reproduce the way GMail handles html5 drag/drop attachments -- where as soon as you drag files over the page, it displays a new element for you to drop them on. I got that part worked out (it wasn't as straight forward as I thought it would be).

现在我试图通过在鼠标悬停在除 drop 元素之外的任何其他元素上时更改鼠标光标来完善它，以告诉用户此处不允许放置.我想我可以使用自定义光标来完成，但这似乎不是 GMail 正在做的事情.规范 建议也可以更改鼠标光标，但我使用 dropzone/effectAllowed 似乎无法使其正常工作.

Now I'm trying to polish it up by changing the mouse cursor when the mouse is over any other element other than the drop element, to tell the user dropping isn't allowed here. I imagine I can do it with a custom cursor, but that does not appear to be what GMail is doing. The spec would suggest it's possible to change the mouse cursor as well, but I can't seem to get it working right, using dropzone/effectAllowed.

任何帮助将不胜感激，这是我当前的设置:http://jsfiddle.net/guYWx/1/

Any help would be appreciated, here's my current setup: http://jsfiddle.net/guYWx/1/

ETA:这是我最终得到的结果:http://jsfiddle.net/guYWx/16/

ETA: Here's what I ended up with: 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 + '">

e.dataTransfer.types is ' + e.dataTransfer.types + '

e.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 + '">

e.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>

推荐答案

查了一下源码，发现你应该在里面设置 event.dataTransfer.dropEffect = 'move';您的 dragover 事件处理程序.谷歌搜索 dropEffect 以了解更多信息并找到:

Did some digging through the source and found that you're supposed to set event.dataTransfer.dropEffect = 'move'; inside your dragover event handler. Googled for dropEffect to read more and found:

dataTransfer.dropEffect

控制在拖动过程中给用户的反馈和拖拽事件.当用户将鼠标悬停在目标元素上时，浏览器的光标将指示要执行的操作类型地点(例如副本、移动等).效果可以采取其中一种以下值:无、复制、链接、移动.

Controls the feedback that the user is given during the dragenter and dragover events. When the user hovers over a target element, the browser's cursor will indicate what type of operation is going to take place (e.g. a copy, a move, etc.). The effect can take on one of the following values: none, copy, link, move.

来自:http://www.html5rocks.com/en/tutorials/dnd/基础知识/

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

Here's what I ended up with: http://jsfiddle.net/guYWx/16/

必须做一个额外的技巧才能让它完美地工作.这样做是为了在您选择文本并将其拖到页面周围时不会出现滴管:

Had to do one additional trick to get it working perfectly. Did this so the dropper wouldn't appear when you select text and drag it around the page:

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

相关文章