有两个问题请老师解答一下，谢谢！

关于H5本地图片拖拽的两个问题，请老师解答一下，谢谢！

添加了ondragleave事件，但是快速拖拽进div内的话，会导致div内的文字交替闪烁，慢慢将图片拖拽进去则不会，该怎么解决？

还有，阻止浏览器在新窗口中打开本地图片事件会失败。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>html5拖拽事件</title>
	<style type="text/css">
		body{
			margin: 0;
		}
		#box{
			width: 300px;
			min-height: 300px;
			border: 2px solid #fce;
			margin: 20px auto 0;
		}
		span{
			width: 300px;
			height: 300px;
			color: #c53;
			font-size: 20px;
			text-align: center;
			display: block;
			line-height: 300px;
		}
	</style>
</head>
<body>
	<div id="box"><span>嗨，图片放这里 o！</span></div>
	<script type="text/javascript">
		document.ondragover=function(e){
			e.preventDefault();
		}
		document.ondrop=function(e){
			//阻止浏览器在新窗口中打开本地图片
			e.preventDefault();
		}

		//目标对象事件
		// var oSpan=document.getElementById("box").getElementsByTagName("span");
		var oSpan=document.querySelector("#box span");
		//拖拽模块
		box.ondragover=function(e){
			e.preventDefault();
			oSpan.style.display="none";
			console.log("over");
		}
		box.ondragleave=function(e){
		    e.preventDefault();
			oSpan.style.display="block";
			console.log("leave");
		}
		box.ondrop=function(e){
			e.preventDefault();
			var imgFiles=e.dataTransfer.files;
			for(var i=0;i<imgFiles.length;i++){
				var imgRead=new FileReader();//文件读取器
				imgRead.readAsDataURL(imgFiles[i]);//要读取的文件对象
				imgRead.onload=function(){
					//console.log(this.result);
					console.log(i+"张图片的数据读取完成");
					var img=new Image();
					img.src=this.result;
					img.style.width="100px";
					img.style.height="100px";
					box.appendChild(img);
				}
			}
		}
		//ondragleave事件会导致div内的文字交替闪烁；且导致阻止浏览器在新窗口打开本地图片失败。该怎么解决？
	</script>
</body>
</html>

不安分的魔菇 2019-01-09

源自：HTML5属性变化 4-12 编程练习

收起

1回答

bbbboom 2019-01-09 17:02:24

代码我测试了，你想实现的效果有些复杂啊

浏览器只能控制不显示图片，可以在设置中选择，但是没有办法实现禁止加载图片。

可以在页面中添加一个图片，设置不允许拖动的属性draggable=false，但是页面之外的图片是控制不了的。

最后一个文字闪烁的情况，可以在ondragleave事件中添加判断，如果box盒子中没有子元素的时候再显示出来

但是这样图片只要一拖进去，再拖出来的时候box盒子子元素长度就不是0。

图片拖进html页面中，是在当前窗口打开的，不是在新窗口打开的啊。

收起回答

提问者不安分的魔菇 #1

对，说错了，图片拖进html页面中是会刷新当前窗口在当前窗口打开。。我想实现，当我图片拖进去但是我没放，又拖出来的时候还是显示提醒：“图片放在这里”。就是当窗口中没有图片的时候，还是显示文字。但是一直实现不了，用dragleave有问题。。你说的判断的这种方法我试了一下，虽然不会闪烁了，但是和不用dragleave方法的效果是一样的。

2019-01-09 17:34:15