看来drop事件并没有在我预料到的时候触发.
我假设当被拖动的元素在目标元素上方释放时会触发drop事件,但这似乎不是这种情况.
我有什么误会？
$('.drop').on('drop dragdrop',function(){
alert('dropped');
});
$('.drop').on('dragenter',function(){
$(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
$(this).html('drop here').css('background','red');
})
我正在听这个drop事件并且正在e.preventDefault()尝试打开已删除的文件.它一直工作到昨天.但就在今天它因某些未知原因而破产.我做了一个JsFiddle#bwquR/10反映相同的.
看起来如果你不采取dragover事件drop无法处理.即使在小提琴中如果你评论dragover它也行不通.
在实际工作中我错过了拼写dragover但是它仍然是一个问题,drop如果没有dragover
小提琴实际上是工作但是身体很小(只有DROP那里的文字).它drop只是在DROP文字不在整个身体上的那个小区域上进行.所以我觉得它不起作用.对困惑感到抱歉.
我已经看了很多脚本,用于通过拖放式AJAX将图像上传到服务器.我找到的脚本不是jQuery,非常大,并没有完全按照我的意愿行事.
将来它应该使用jQuery,AJAX和PHP上传图像.
我的问题
在许多示例中,我查看了e.dataTransfer.files的工作.在我的情况下,它没有.我需要以某种方式绑定它吗？
我想尽可能多地使用jQuery.
的jsfiddle
尽情玩耍......
码
<html>
<head>
<style type="text/css">
#dropzone {
border: 2px dashed #ccc;
width: 300px;
height: 200px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#dropzone').on({
dragenter: function(e) {
$(this).css('background-color', 'lightBlue');
},
dragleave: function(e) {
$(this).css('background-color', 'white');
},
drop: function(e) {
e.stopPropagation();
e.preventDefault();
console.log(e.dataTransfer.files);
}
});
});
</script>
</head>
<body>
<div id="dropzone">
Drop files here
</div>
</body>
</html>