Question

我正在尝试重现GMail处理html5拖放附件的方式 - 只要您将文件拖到页面上，它就会显示一个新元素供您放置。我得到了那个部分（它不像我想象的那样直接）。

现在我正在尝试通过在鼠标悬停在除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;">-&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>

Answer 1

是否有人挖掘了源代码并发现您应该在event.dataTransfer.dropEffect = 'move';事件处理程序中设置dragover。用Google搜索dropEffect以阅读更多内容并找到：

<强> dataTransfer.dropEffect

控制在dragenter期间给予用户的反馈   dragover事件。当用户将鼠标悬停在目标元素上时，   浏览器的光标将指示将采取何种类型的操作   地方（例如副本，搬家等）。效果可以采取其中一个   以下值：无，复制，链接，移动。

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

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

必须做一个额外的技巧才能让它完美运作。这样做，这样当您选择文本并将其拖到页面上时，滴管就不会出现：

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

Answer 2

@Langdon - 感谢您指出我需要的确切内容！我赞成了它。

花了这么多时间后，我得到了与预期完全一致的建议。

我将 effectAllowed 与 dropEffect 结合使用，以便在执行拖放操作时提供视觉提示。完全跨浏览器！

$(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
});

Answer 3

您必须更改cursor CSS属性。

您可以找到cursor here的不同值列表。

您还可以使用cursor: url('foo.png');指定自定义光标图像。

更改HTML5拖放文件的鼠标光标（GMail拖放）

3 个答案: