5

拖动和输入<div class="upload-cont">时，边框和文本的颜色完全从灰色变为黑色，当涉及到它时，<span class="add-text">它又变回灰色。

CSS：

.upload-cont{
    cursor:pointer;
    margin-left:130px;
    display:inline-block;
    border:2px dashed #a8a8a8;
    max-width:220px;
    max-height:180px;
    min-width:220px;
    min-height:180px;
    position:relative;
    border-radius:3px;
}
.add-text{
    display:block;
    font-size:10px;
    font-weight:bold;
    color:#999;
    word-wrap:break-word;
    text-align:center;
    width:100px;
    top:37%;
    left:25%;
    position:absolute;
}
.add-text:hover{ color:black; }

HTML：

<div class="upload-cont">
    <span class="add-text">
        Click to add or<br/>
        Drag and drop image here
    </span>
</div>

查询：

$(document).ready(function () {
    $(".upload-cont,.add-text").on('dragenter', function (e) {
        $(".upload-cont").css({
            "border": "2px dashed black"
        });
        $(".add-text").css({
            "color": "black"
        });
    });
    $(".upload-cont").on('dragleave', function (e) {
        $(".upload-cont").css("border", "2px dashed #a8a8a8");
        $(".add-text").css({
            "color": "#a8a8a8"
        });
    });
});

输入时我该怎么做才能使边框和文本保持黑色<span class="add-text">

检查这个jsfiddle：http: //jsfiddle.net/rpABs/

提前致谢

4

3 回答 3

9

输入子元素时使用dragover而不是dragenter因为dragleave触发

$(".upload-cont,.add-text").on('dragover', function (e) {
    $(".upload-cont").css({
        "border": "2px dashed black"
    });
    $(".add-text").css({
        "color": "black"
    });
});
$(".upload-cont").on('dragleave', function (e) {
    $(".upload-cont").css("border", "2px dashed #a8a8a8");
    $(".add-text").css({
        "color": "#a8a8a8"
    });
});

演示

于 2013-01-13T06:10:20.150 回答
3

显然，这个问题比我想象的更频繁，因为我发现至少 5 个与同一主题相关的问题（我将回答与此问题相关的所有问题）。

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

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

  1. 使用 $_FILES 拖放桌面文件
  2. 使用 $ _POST 和 cURL 拖放到浏览器图像/元素或 url
  3. 使用 $ _FILES 使用按钮附加设备文件
  4. 使用输入使用 $ _POST 和 cURL 写入/粘贴 url 图像/元素

在此处输入图像描述

问题：由于表单输入和图像的所有内容都在 DIV 子项中，因此即使没有离开虚线，也会触发“dragleave”。使用属性“pointer-events: none”不是替代方法，因为方法 3 和 4 需要触发“onchange”事件。

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

结构：

  • div #drop-container：主 div，保持所有
  • div #drop-area：“dragenter”监听器和中间触发器#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一起使用，这样你就可以启动事件触发器，开始隐藏“上传框”。

最后，我更喜欢使用“dragover”而不是“dragenter”，因为它有一个小的延迟（毫秒），有利于性能（https://developer.mozilla.org/en-US/docs/Web/API/Document/dragover_event） .

于 2019-05-18T04:59:49.253 回答
2

当您拖动时，该dragover事件会不断触发，因此我不喜欢该解决方案。我编写了一个名为Dragster的小库，它为我提供了更好的enter&leave事件。

于 2013-11-14T09:46:36.000 回答