拖放在Firefox中不起作用[重复]

Posted 2023-05-08

【中文标题】拖放在Firefox中不起作用[重复]

【英文标题】：drag and drop not working in firefox [duplicate]

【发布时间】：2013-08-18 15:29:21

【问题描述】：

我已经在 J​​Query 和 html5 中实现了拖放功能，它在 chrome 中运行良好，但在 Firefox 中运行良好。下面是我的代码，我正在提醒丢弃图像的 id，它在 Firefox 中显示为未定义，下面是我的代码，请帮助。 jsfiddle：http://jsfiddle.net/rajutikale/2R6p8/

查看：

<!-- 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)"  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"  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"  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));

【问题讨论】：

似乎在这里工作得很好。什么版本的火狐。您的控制台是否出现错误？

好吧，我使用的是 22.0，我非常努力地调试它，它不会在控制台中显示任何错误，因为它没有在我结束时触发拖动事件......请建议我应该怎么做做吗？

同一个问题多次发布？ ***.com/questions/18249081/…

【参考方案1】：

根据https://developer.mozilla.org/en-US/docs/Web/Events/dragstart 将数据设置为null（例如在示例的html部分或事件函数中）：

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

Chromium 不需要那个。