我的javascript中的dragstart事件有问题。当使用镀铬时，它的工作原理非常好，但在firefox中根本不会发射。
(function () {
var dropzone = document.getElementById('dropzone-add');
var dropzone2 = document.getElementById('dropzone-del');
var draggedItem;
function drag (e) { //This one does not fire in firefox.. I have tried many methods..
e.dataTransfer.setData('text/plain', e.target.src);
draggedItem = e.target;
}
var displayUploads = function (data) {
var uploads = document.getElementById('uploads');
for(index=0; index<data.length; index=index+1){
var div = document.createElement('div');
var anchor = document.createElement('a');
var image = document.createElement('img');
div.className = 'col-lg-2 col-md-4 col-xs-6 thumb';
anchor.className = 'thumbnail';
anchor.href = '#';
image.className = 'img-responsive';
image.src = data[index].file;
image.alt = data[index].name;
anchor.appendChild(image);
div.appendChild(anchor);
uploads.insertBefore(div, uploads.firstChild);
image.setAttribute('draggable', true);
image.ondragstart = function(event) {drag(event)}; //This is the elment that will be draggable.
//image.addEventListener('dragstart', drag, false);
}
}
var upload = function (files) {
var formData = new FormData(),
xhr = new XMLHttpRequest(),
index;
for(index=0; index<files.length; index = index+1){
formData.append('file[]', files[index]);
}
xhr.onload = function () {
var data = JSON.parse(this.responseText);
displayUploads(data);
}
xhr.open('post', 'upload.php');
xhr.send(formData);
}
var removeFile = function(src){
xhr = new XMLHttpRequest();
xhr.onload = function () {
var data = this.responseText;
console.log(data);
}
xhr.open('post', 'delete.php');
xhr.send(src);
}
dropzone.ondrop = function (e) {
e.preventDefault();
this.className = 'dropzone';
if(e.dataTransfer.files.length < 1){
alert('Use the other dropzone to delete.');
return false;
}
else
upload(e.dataTransfer.files);
}
dropzone.ondragover = function () {
this.className = 'dropzone dragover';
return false;
}
dropzone.ondragleave = function () {
this.className = 'dropzone';
return false;
}
dropzone2.ondrop = function (e) {
e.preventDefault();
this.className = 'dropzone';
var data = e.dataTransfer.getData('text');
console.log(draggedItem);
console.log(data);
//removeFile(data);
}
dropzone2.ondragover = function () {
this.className = 'dropzone dragover';
return false;
}
}());
输出的图像变得可以正常拖动，并且在Chrome中工作正常。我试图使用event.originalEvent等方法但没有成功。感谢任何帮助，我现在被困住了。请忽略循环中的可怕性。
<html>
<head>
<meta charset="utf-8">
<title>Upload - drag drop</title>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="content-fluid">
<div class="dropzone" id="dropzone-add">Drag the file you want to upload here</div>
<div class="dropzone" id="dropzone-del">Drag the file you want to delete here</div>
<div class="row" id="uploads">
</div>
</div>
<?php
$uploaded = array();
if(!empty($_FILES['file']['name'][0])){
$upload_folder = 'uploads/';
foreach($_FILES['file']['name'] as $position => $name){
$upload_path = $upload_folder . time() . '_' . basename($_FILES['file']['name'][$position]);
if(move_uploaded_file($_FILES['file']['tmp_name'][$position], $upload_path)){
$uploaded[] = array('name' => $name, 'file' => $upload_path);
}
}
echo json_encode($uploaded);
}
?>