I am building a chrome extension which will let the user to drag and drop files and save the same to the server. From the extension I have injected a div element in the page when I drop an image file the browser is displaying the image on the entire page. The drop event is not getting detected in the extension, but if I have a input element with the type file and if I drop the file on that element then the change event is getting detected.
我正在构建一个chrome扩展，它将允许用户拖放文件并将其保存到服务器。从扩展中我在页面中注入了div元素，当我删除图像文件时，浏览器在整个页面上显示图像。在扩展中没有检测到drop事件，但是如果我有一个带有类型文件的input元素，并且如果我将该文件放在该元素上，则会检测到change事件。
Not sure how to detect the drop event from the extension. Any help is appreciated.
不确定如何从扩展中检测drop事件。任何帮助表示赞赏。
contentScript.js file
contentScript.js文件
//building the Dropzone Div
var dropdiv = $("<div>", {
id :"sforce-dz-dropZone",
class : "sforce-dz-dropZonebg"
}).text('Add you\'re files here');
//injecting the drop div in the page
$("input[name=attachFile]").after(dropdiv);
//adding 'drop' event listener to the div.
//This is not getting logged at all.
$("#sforce-dz-dropZone").on('drop', function(e){
e.preventDefault();
e.stopPropagation();
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
console.log('the file name is '+ f.name);
}
});
//Adding another event. click, just to see if the events are getting triggered.
//When clicked on the div the console is logging the below string.
$("#sforce-dz-dropZone").on('click',function(){
console.log('clicked');
});
Manifest File
清单文件
{
"name": "name",
"version": "0.0.1",
"manifest_version": 2,
"description": "text",
"author": "someone",
"content_scripts": [
{
"matches" : ["https://*.mysite.com/*"],
"js" : ["jquery.js","contentScript.js"],
"css" : ["sforce-dz.css"]
}
],
"permissions": [
"cookies",
"unlimitedStorage"
]
}
2 个解决方案
#1
12
This is a really confusing part of handling drag and drop. You'd expect to just listen for the drop event as you do with click submit mouseOver etc. But it won't work unless it also has a dragOver event.
这是处理拖放的一个非常令人困惑的部分。你希望只是像点击提交mouseOver等那样监听drop事件。但除非它还有一个dragOver事件，否则它将无法工作。
"without the dragOver event handler, the default event handler from dragOver event is used, thus, no drop event is triggered." Answer Here
“如果没有dragOver事件处理程序，则使用dragOver事件的默认事件处理程序，因此不会触发drop事件。”回答这里
Simplest working example
/* events fired on the drop targets */
document.addEventListener("dragover", function( event ) {
// prevent default to allow drop
event.preventDefault();
});
document.addEventListener("drop", function( event ) {
// prevent default action (open as link for some elements)
event.preventDefault();
console.log('dropped');
});
Working example from HTML5Rocks
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
#2
0
dropdiv.on('dragover', function (e) {
return false;
});
When mouse is above our drop-area, you must return 'false'.
This way realized filtering of sources.
当鼠标位于我们的落差区域上方时，您必须返回“false”。这种方式实现了对源的过滤。
I recommend you to read a book written by David Flanagan: "JavaScript: The Definitive Guide"
我建议你阅读David Flanagan写的一本书：“JavaScript：The Definitive Guide”
#1
12
This is a really confusing part of handling drag and drop. You'd expect to just listen for the drop event as you do with click submit mouseOver etc. But it won't work unless it also has a dragOver event.
这是处理拖放的一个非常令人困惑的部分。你希望只是像点击提交mouseOver等那样监听drop事件。但除非它还有一个dragOver事件，否则它将无法工作。
"without the dragOver event handler, the default event handler from dragOver event is used, thus, no drop event is triggered." Answer Here
“如果没有dragOver事件处理程序，则使用dragOver事件的默认事件处理程序，因此不会触发drop事件。”回答这里
Simplest working example
/* events fired on the drop targets */
document.addEventListener("dragover", function( event ) {
// prevent default to allow drop
event.preventDefault();
});
document.addEventListener("drop", function( event ) {
// prevent default action (open as link for some elements)
event.preventDefault();
console.log('dropped');
});
Working example from HTML5Rocks
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
#2
0
dropdiv.on('dragover', function (e) {
return false;
});
When mouse is above our drop-area, you must return 'false'.
This way realized filtering of sources.
当鼠标位于我们的落差区域上方时，您必须返回“false”。这种方式实现了对源的过滤。
I recommend you to read a book written by David Flanagan: "JavaScript: The Definitive Guide"
我建议你阅读David Flanagan写的一本书：“JavaScript：The Definitive Guide”