相关疑难解决方法(0)

概观

我有以下HTML结构,并且我已将dragenter和dragleave事件附加到<div id="dropzone">元素.

<div id="dropzone">
    <div id="dropzone-content">
        <div id="drag-n-drop">
            <div class="text">this is some text</div>
            <div class="text">this is a container with text and images</div>
        </div>
    </div>
</div>

问题

当我将文件拖过时<div id="dropzone">,dragenter事件将按预期触发.但是,当我将鼠标移到子元素上时,例如<div id="drag-n-drop">,dragenter为<div id="drag-n-drop">元素dragleave触发事件,然后为该<div id="dropzone">元素触发事件.

如果我<div id="dropzone">再次将鼠标悬停在该元素上,dragenter则会再次触发该事件,这很酷,但随后dragleave会为刚刚离开的子元素触发事件,因此removeClass执行该指令,这并不酷.

出于以下原因,此行为存在问题:

1. 我只安装dragenter及dragleave到<div id="dropzone">,所以我不明白为什么孩子要素附上以及这些事件.

2. 我仍然<div id="dropzone">在徘徊在它的孩子上时拖着元素,所以我不想dragleave开火!

的jsfiddle

这里有一个jsFiddle修补:http …

我正在使用html5事件来启用文件和元素拖放.我已将dragover事件附加到正文并使用事件委派来显示可拖放的可拖动位置.我的问题是如何判断文件是否被拖动与具有draggable = true的元素.我知道我可以通过e.target检测被拖动的元素.但是,我怎么知道它是否是一个文件.

jquery可用.

另外,不要在这里讨论jquery-ui draggable.

我开始认为可能检测文件的唯一方法是排除并检测元素.如果我们不拖动元素,则假设它是一个文件.这将需要额外的工作,但默认情况下图像和链接是可拖动的,因此我将不得不向它们添加事件或阻止它们拖动.

我目前正在处理上传脚本,当然它还具有拖放功能.

但是我试图让这个工作当我在我的元素上拖动一个文件时它会添加类拖拽然而因为我的元素有子元素它会不断触发因为它进入和离开元素.

我想知道的是我如何扩展*dragenter* / *dragover*包括儿童的主要元素呢？

这是我的代码的精简版(请注意我已禁用文件输入):

$(document).ready(function(){
    $(window).on('dragenter', function(){
        $(this).preventDefault();
    });
    $('#drag-and-drop-zone').on('dragenter', function(){
        $(this).addClass('drag-over');
    });
    $('#drag-and-drop-zone').on('dragleave', function(){
        $(this).removeClass('drag-over');
    });
});

.uploader
{
    width: 100%;
    background-color: #f9f9f9;
    color: #92AAB0;
    text-align: center;
    vertical-align: middle;
    padding: 30px 0px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 200%;
    box-shadow: inset 0px 0px 20px #c9afb2;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.uploader div.or {
    font-size: 50%;
    font-weight: bold;
    color: #C0C0C0;
    padding: 10px;
} …

我试图跟踪整个屏幕的dragenter/leave,这在Chrome/Safari中运行良好,由/sf/answers/721757081/提供的draghover插件提供,如下所示:

$.fn.draghover = function(options) {
    return this.each(function() {

        var collection = $(),
            self = $(this);

        self.on('dragenter', function(e) {
            if (collection.size() === 0) {
                self.trigger('draghoverstart');
            }
            collection = collection.add(e.target);
        });

        self.on('dragleave drop', function(e) {
            // timeout is needed because Firefox 3.6 fires the dragleave event on
            // the previous element before firing dragenter on the next one
            setTimeout( function() {
                collection = collection.not(e.target);
                if (collection.size() === 0) {
                    self.trigger('draghoverend');
                }
            }, 1);
        });
    });
};

function setText(text) {
    $('p.target').text(text); …

问题

我刚刚完成了一项功能,用户可以将文件拖到浏览器中,然后使用支持的文件上传插件来处理丢弃.

然而,为了给用户一个暗示他们甚至可以放弃东西的提示,我已经实现了一个dragover事件,以显示div类似于"Drop Here"的内容.反过来,这会隐藏div具有"选择文件..."按钮的按钮,并替换它,直到用户停止拖动.

但是,当我实现这一点时,拖动目标区域会导致闪烁.要明确:

• div 显示"选择文件"界面.
• 拖动项目(或拖动选定的文字); 显示"放在这里".
• 项目拖过"Drop here"区域; 闪烁开始了.

另外:

• Opera 12或Firefox 16中没有问题.
• 这个问题在Chrome 23和Safari 5中显而易见.
• 问题部分在于IE 9(IE 10未经测试); 它闪烁约5秒钟,然后停止.

的jsfiddle

(警告:小提琴很粗糙.)

只需选择一些文本并将其拖到蓝色框上,您就会看到会发生什么; 显而易见的是它不应该展示的行为.

用于小提琴的代码

var $dropTarget = $("#container");
$(document).bind("dragover", function(e) {
    if ($dropTarget.hasClass("highlight"))
        return;

    $dropTarget.addClass("highlight");
    $dropTarget.find("[name='drop']").show();
    $dropTarget.find("[name='drag']").hide();
}).bind("dragleave drop", function(e) {
    if (!$dropTarget.hasClass("highlight"))
        return;

    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
});?

我的解决方案......？

说实话,我不知道该尝试什么.没有关于dragoveror 的行为的大量文档dragleave,我甚至不知道为什么会这样,所以我甚至无法开始调试它.我觉得dragover应该只开一次,但即使在屏幕上拖动也只是一遍又一遍地开火.

我看过谷歌图片和谷歌联系人的拖放行为,但他们的代码完全缩小,不可读,我甚至找不到任何指定的"拖动"行为.

那么,对这种看似奇怪的行为有什么解决方法吗？如果这是WebKit中的一个错误,我怀疑,是否有一些很好的解决方法和/或黑客我可以使用？

感谢大家的时间!

请参阅此codesandbox。

我有一个父 div 需要处理可拖动事件（例如将文件拖到其上时）。当onDragEnter调用时，我希望背景颜色改变。但是，我有一个子 div，当将其悬停在其上时，会调用父 div 的onDragLeave事件。我尝试使用此子 div 的 ref 来确定事件目标是否包含在子 div 中，但这似乎不起作用。如何避免 React 中的子 div 调用该onDragLeave事件？谢谢！

import React, { useState } from 'react';

const App = () => {
  const [dragOver, setDragOver] = useState(false);

  const preventDefaults = (event) => {
    event.preventDefault();
    event.stopPropagation();
  };

  const onDragEnter = (event) => {
    preventDefaults(event);
    console.log('ENTER');
    if (!dragOver) {
      setDragOver(true);
    }
  };

  const onDragLeave = (event) => {
    preventDefaults(event);
    console.log('LEAVE');
    setDragOver(false);
  };

  return (
    <div
      data-testid="document-upload" …