javascript 拖放在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18269677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
drag and drop not working in firefox
提问by Zorba
I have implemented drag and drop functionality in JQuery and html5 , its working great in chrome but stuck in Firefox following is my code where i am alerting id of dropped image which appears as undefined in Firefox following is my code , please help . jsfiddle: http://jsfiddle.net/rajutikale/2R6p8/
我已经在 JQuery 和 html5 中实现了拖放功能，它在 chrome 中工作得很好，但在 Firefox 中卡住了下面是我的代码，我在下面是我的代码，在 Firefox 中显示为未定义的拖放图像的警报 id，请帮助。jsfiddle：http: //jsfiddle.net/rajutikale/2R6p8/
View:
看法：
<!-- 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:
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));
}
回答by RandallB
Firefox requires that a user run the dataTransfer.setDatafunction in the event.
Firefox 要求用户dataTransfer.setData在事件中运行该函数。
For you jQueryusers, that means the following code should resolve your issue:
对于您的jQuery用户，这意味着以下代码应该可以解决您的问题：
function dragstartHandler(event){
event.originalEvent.dataTransfer.setData('text/plain', 'anything');
}
Future events on the same drag will now properly fire as you expected. Obviously you can replace the setDataarguments with more useful data.
同一阻力上的未来事件现在将按您的预期正确触发。显然，您可以setData用更有用的数据替换参数。
回答by firebird631
According to https://developer.mozilla.org/en-US/docs/Web/Events/dragstartset data to null (like in html part of the example, or in the event function) with:
根据https://developer.mozilla.org/en-US/docs/Web/Events/dragstart将数据设置为 null（例如在示例的 html 部分，或在事件函数中）：
event.dataTransfer.setData('text/plain', null);
Chromium doesn't need of that.
铬不需要那个。
