在浏览器上拖动文件时显示放置区域 [英] showing a drop area when file is draged on the browser

问题描述

我想显示拖放是在浏览器上拖动文件时，所有元素都不应允许删除文件，除了div上带有"uloader"类的div，我认为我的问题是放置区域显示在dragenter上消失了，我认为是所谓的子拖动事件，我不知道如何解决此问题

这是代码

i want to show the drop are when file is dragged on the browser and all the element should not allow the file to be dropped except the div with ''uloader'' class on it , i think my problem is drop area display on dragenter but disappears , i think child drag events are called , i cant figure how to solve this issue

here is the code

<div class="container">
<div class="overlay">
<div class="uloader" >
<div >
Drop Files Here
</div>
</div>
<div class="loader" >
<div>
Some Contents
</div>
</div>
</div>
</div>

这是js代码

and here is js code

$(function () {
     $(document).bind({
                            dragenter: function (e) {
                                $(".loader").css('display', 'none');
                                e.stopPropagation();
                                e.preventDefault();
                                var dt = e.originalEvent.dataTransfer;
                                dt.effectAllowed = dt.dropEffect = 'none';
                            },
                            dragover: function (e) {                                
                                e.stopPropagation();
                                e.preventDefault();
                                var dt = e.originalEvent.dataTransfer;
                                dt.effectAllowed = dt.dropEffect = 'none';
                            },
                              dragleave: function (e) {
                                              $(".loader").css('display', 'block');                                              
                                                e.stopPropagation();
                                                e.preventDefault();
                                                var dt = e.originalEvent.dataTransfer;
                                                dt.effectAllowed = dt.dropEffect = 'none';
												
                                           }

                        });
						
				$('.uloader').bind({
                dragenter: function (e) {

                    return false;
                },
                dragover: function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                },
                dragleave: function (e) {

                    return false;
                },
                drop: function (e) {
                    var dt = e.originalEvent.dataTransfer;
                    console.log(dt.files.length);
                    return false;
                }
            });
});

.uloader
{
	padding: 0px;
	height: 400px;
	width: 700px;;
	background: pink;
	font: 16px helvetica, arial, sans-serif;
	text-align: center;
	color: gray;
	margin: auto;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 3px;
	position: absolute;
}

.loader
{
	padding: 0px;
	height: 400px;
	width: 700px;;
	background: white;
	font: 16px helvetica, arial, sans-serif;
	text-align: center;
	color: gray;
	margin: auto;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 3px;
	position: absolute;
}

.loader div, .uloader div
{
	margin-top: 180px;
	font-size: 30px;
}
.overlay
{
	margin: auto;
	padding: 0px;
	height: 400px;
	width: 700px;;
	background: lightgray;
	border:1px dashed black;
}
.container
{
	width: 100%;	
}

推荐答案

( function (){

(文档).bind({ dragenter:功能(e){

(document).bind({ dragenter: function (e) {

(" .loader").css( display' ，' 没有')； e.stopPropagation(); e.preventDefault(); var dt = e.originalEvent.dataTransfer; dt.effectAllowed = dt.dropEffect = ' none'; }， 拖曳:功能(e){ e.stopPropagation(); e.preventDefault(); var dt = e.originalEvent.dataTransfer; dt.effectAllowed = dt.dropEffect = ' none'; }， dragleave:功能(e){

(".loader").css('display', 'none'); e.stopPropagation(); e.preventDefault(); var dt = e.originalEvent.dataTransfer; dt.effectAllowed = dt.dropEffect = 'none'; }, dragover: function (e) { e.stopPropagation(); e.preventDefault(); var dt = e.originalEvent.dataTransfer; dt.effectAllowed = dt.dropEffect = 'none'; }, dragleave: function (e) {

这篇关于在浏览器上拖动文件时显示放置区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！