Question

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

然而我想在我的元素上拖动文件时将其设置为拖放，但是因为我的元素有孩子，它不断射击，因为它进入和离开元素。

我想知道的是是如何扩展*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;
}

.uploader div.browser label {
    background-color: #ffffff;
    border: 2px solid #f44;
    padding: 5px 15px;
    color: #f44;
    padding: 6px 0px;
    font-size: 40%;
    font-weight: bold;
    cursor: pointer;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    display: block;
    width: 300px;
    margin: 20px auto 0px auto;
    transition: all 0.3s linear 0s;
}

.uploader div.browser span {
    cursor: pointer;
}

.uploader div.browser input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    opacity: .0;
    filter: alpha(opacity= 0);
    direction: ltr;
    cursor: pointer;
}

.uploader div.browser label:hover {
    background-color: #f44;
    color: #fff;
    border: 2px solid #fff;
}

.drag-over{
    border: 2px solid #00aef0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="uploader" id="drag-and-drop-zone">
    <div>Drag &amp; Drop Images Here</div>
    <div class="or">-or-</div>
    <div class="browser">
        <label>
            <span>Select Image</span>
            <input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true">
        </label>
    </div>
</div>

Answer 1

解决了!!

这是一个简单的例子，而不是 on（'dragenter'） 我需要使用 bind（'dragover'）

$(document).ready(function(){ $(window).on('dragenter', function(){ $(this).preventDefault(); }); $('#drag-and-drop-zone').bind('dragover', function(){ $(this).addClass('drag-over'); }); $('#drag-and-drop-zone').bind('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; } .uploader div.browser label { background-color: #ffffff; border: 2px solid #f44; padding: 5px 15px; color: #f44; padding: 6px 0px; font-size: 40%; font-weight: bold; cursor: pointer; border-radius: 2px; position: relative; overflow: hidden; display: block; width: 300px; margin: 20px auto 0px auto; transition: all 0.3s linear 0s; } .uploader div.browser span { cursor: pointer; } .uploader div.browser input { position: absolute; top: 0; right: 0; margin: 0; border: solid transparent; border-width: 0 0 100px 200px; opacity: .0; filter: alpha(opacity= 0); direction: ltr; cursor: pointer; } .uploader div.browser label:hover { background-color: #f44; color: #fff; border: 2px solid #fff; } .drag-over{ border: 2px solid #00aef0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div class="uploader" id="drag-and-drop-zone"> <div>Drag & Drop Images Here</div> <div class="or">-or-</div> <div class="browser"> <label> <span>Select Image</span> <input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true"> </label> </div> </div>

Answer 2

您可以使用样式隐藏鼠标交互中的元素：

e.g。将其添加到子元素：

pointer-events: none;

不幸的是，IE中的支持并不是很好：http://caniuse.com/#feat=pointer-events

Answer 3

我找到了另外两个可行的解决方案。

仅当您在区域内没有其他控制器元素（编辑，删除）时，该方法才有效，因为此解决方案也会阻止它们：

#drop * {pointer-events: none;}

有一个better solution。

这个想法是，您每次在新的子元素中输入/悬停时都会增加一个计数器，而在离开其中一个元素时会减少计数器。

$(document).ready(function(){

    var dropzoneCounter = 0;

    $('#drag-and-drop-zone').on('dragenter', function(){
        dropzoneCounter++;
        $(this).addClass('drag-over');
    });

    $('#drag-and-drop-zone').bind('dragleave', function(){
        dropzoneCounter--;
        if (dropzoneCounter === 0) {
            $(this).removeClass('drag-over');
        }
    });

    $('#drag-and-drop-zone').bind('drop', function(){
        dropzoneCounter = 0;
        $(this).removeClass('drag-over');
    });
});

Answer 4

显然，这个问题比我想的要多，因为我发现至少5个与同一主题相关的问题。

与“ mouseover”不同，事件“ dragover”和“ dragleave”不会将子元素视为一个整体，因此，每次鼠标经过任何一个子元素时，都会触发“ dragleave”。

考虑文件上传，我创建了一个小部件，该小部件允许：

使用$ _FILES拖放桌面文件
使用$ _POST和cURL拖放到浏览器图像/元素或url
使用$ _FILES按钮来附加设备文件
使用输入通过$ _POST和cURL编写/粘贴url图片/元素

问题：由于所有形式的输入和图像都在DIV子级中，因此即使没有离开虚线，也会触发“ dragleave”。不能使用“指针事件：无”属性，因为方法3和4需要触发“ onchange”事件。

解决方案？重叠的DIV，当鼠标进入时会覆盖所有放置容器，唯一的一个子元素带有“指针事件：无”。

结构：

div＃drop-container：主要div，保留所有提示信息
div＃drop-area：“猛兽”侦听器和中间触发器＃drop-pupup
div＃drop-pupup：与＃drop-area，“ dragenter”，“ dragleave”和“ drop”侦听器相同的水平

然后，当鼠标通过将元素拖动到＃drop-area进入时，立即在前面显示＃drop-pupup，随后事件将在该div上而不是初始接收者上。

这是JS / jQuery代码。我自由离开了PoC，所以不要在我迷路的时候一直迷路。

jQuery(document).on('dragover', '#drop-area', function(event) {
	event.preventDefault();
	event.stopPropagation();
	jQuery('#drop-popup').css('display','block');
});

jQuery(document).on('dragover dragleave drop', '#drop-popup', function(event) {
	event.preventDefault();
	event.stopPropagation();

	console.log(event.type);

	// layout and drop events
	if ( event.type == 'dragover') {
		jQuery('#drop-popup').css('display','block');
	}
	else {
		jQuery('#drop-popup').css('display','none');
	
		if ( event.type == 'drop' ) {
			// do what you want to do
			// for files: use event.originalEvent.dataTransfer.files
			// for web dragged elements: use event.originalEvent.dataTransfer.getData('Text') and CURL to capture
		}
	}
});

body {
  background: #ffffff;
  margin: 0px;
  font-family: sans-serif;
}

#drop-container {
  margin: 100px 10%; /* for online testing purposes only */
  width: 80%; /* for jsfiddle purposes only */
  display: block;
  float: left;
  overflow: hidden;
  box-sizing: content-box;
  position: relative; /* needed to use absolute on #drop-popup */
  border-radius: 5px;
  text-align: center;
  cursor: default;
  border: 2px dashed #000000;
}

#drop-area {
  display: block;
  float: left;
  padding: 10px;
  width: 100%;
}

#drop-popup {
  display: none;
  box-sizing: content-box;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to BOTTOM, rgba(245, 245, 245, 1) , rgba(245, 245, 245, 0));
  height: 512px;
  padding: 20px;
  z-index: 20;
}

#drop-popup > p {
   pointer-events: none;
}

<html>
  <head>
    <title>Drag and Drop</title>
  </head>
  <body>

    <div id="drop-container">
      <div id="drop-area">
        <p>Child paragraph content inside drop area saying "drop a file or an image in the dashed area"</p>
        <div>This is a child div No. 1</div>
        <div>This is a child div No. 2</div>
      </div>
      <div id="drop-popup">
        <p>This DIV will cover all childs on main DIV dropover event and current P tag is the only one with CSS "pointer-events: none;"</p>
      </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
  </body>
<html>

关于jQuery“ on”，将其与div id一起使用，这样您就可以启动事件触发器，从而隐藏“ uploading box”。

最后，相对于“ dragoner”，我更喜欢使用“ dragover”，因为它具有较小的延迟（毫秒），有利于性能（https://developer.mozilla.org/en-US/docs/Web/API/Document/dragover_event）。

包括孩子在内的jQuery dragenter或dragover

4 个答案: