Drag & Drop funktioniert nicht in Firefox

Question

Ich habe Drag implementiert und Drop-Funktionalität in JQuery und html5, seine Arbeiten groß in Chrom aber steckte in Firefox folgenden ist mein Code, wo ich id verlorenes Bild am Alarmieren, die als undefiniert in Firefox erscheinen folgende ist mein Code, bitte helfen. jsfiddle: http://jsfiddle.net/rajutikale/2R6p8/

Ausblick:

<!-- dragable image --> 
<a href="#?w=976" rel="popup1" id="<?=$album['album_id'].'-'.$data->content_id?>" class="poplight album_photos"><img id="<?=$album['album_id'].'-'.$data->content_id?>" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" alt="" src="<?=$imagePath?>"></a> 

<input type="hidden" id="<?='wall'.$data->content_id?>" value="<?=$data->wall_id?>" /> 
<input type="hidden" id="<?='type'.$data->content_id?>" value="<?=$data->content_type?>" /> 
<input type="hidden" id="<?='user'.$data->content_id?>" value="<?=$_SESSION['user_type']?>" /> 

<!-- dropable area --> 
<div class="" style="z-index: 1; position:fixed; right:124px; top:60px" id="div1" ondrop="drop(event);;" ondragover="allowDrop(event);"> <a href="#"><img id="dropzon_image"src="<?php echo IMAGE_PATH_HTTP?>babbler_btn.jpg" alt="" border="0" style="cursor: pointer; cursor: hand; "/></a> 
    <div id="overlay" style="display:none;z-index: 2; position:fixed; right:0px; top:32px; cursor: pointer;border-color: blueviolet;"> 
     <img id="drop_image" src="<?php echo IMAGE_PATH_HTTP?>drop_image.jpg" alt="" border="1" style="cursor: pointer; cursor: hand; " /> 
    </div> 
</div> 

JS:

function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("Text", ev.target.id); 
    $("#div1").find("#overlay").slideDown(); 
    setTimeout(function() { 
     $("#overlay").hide(); 
    }, 4000); 
} 

function drop(ev) { 
    var id = ev.dataTransfer.getData("Text"); /*implimented solution*/ 
    alert(id); 
    ev.preventDefault(); 
    var action = 'download'; 
    var wall_id = '62'; 
    var stat = 'Album'; 
    var cnt = '0'; 
    var user_type = 'R'; 
    var status = do_download(action, wall_id, stat, cnt, user_type); 
    $("#overlay").hide(); 
    // ev.target.appendChild(document.getElementById(data)); 
} 

Answer 1

Firefox erfordert, dass ein Benutzer die dataTransfer.setData Funktion im Falle laufen.

Für Sie jQuery Benutzer, das bedeutet, der folgende Code Ihr Problem beheben soll:

function dragstartHandler(event){ 

    event.originalEvent.dataTransfer.setData('text/plain', 'anything'); 

} 

Zukünftige Veranstaltungen auf der gleichen ziehen werden nun wie Feuer, wie Sie erwarten. Offensichtlich können Sie die Argumente durch nützlichere Daten ersetzen.

Answer 2

Nach https://developer.mozilla.org/en-US/docs/Web/Events/dragstart eingestellten Daten an null (wie in HTML-Teil des Beispiels, oder in der Event-Funktion) mit:

event.dataTransfer.setData('text/plain', null); 

Chromium braucht nicht davon.