拖放在Firefox中无法工作 [英] drag and drop not working in firefox

问题描述

我已经在JQuery和html5中实现了拖放功能，它在Chrome中的工作非常出色，但是在Firefox下面是我的代码，其中我正在提醒在Firefox中显示为未定义的丢弃图像的ID，以下是我的代码，请帮忙。 jsfiddle： http://jsfiddle.net/rajutikale/2R6p8/

查看：

 <！ - 可拖动的图像 - > 
< a href =＃？w = 976 =popup1id =<？= $ album ['album_id']。''$ data-> content_id？> class =poplight album_photos>< img id =<？= $ album ['album_id']。''$ data-> content_id？> draggable =trueondragstart =drag（event）ondragover =allowDrop（event）alt =src =<？= $ imagePath？>>< / a> 
 
< input type =hiddenid =<？='wall'$ data-> content_id？>值= LT; = $ DATA-> wall_id>？ /> 
< input type =hiddenid =<？='type'$ data-> content_id？>值= LT; = $ DATA-> CONTENT_TYPE>？ /> 
< input type =hiddenid =<？='user'$ data-> content_id？>值=LT; = $ _ SESSION [ USER_TYPE]>？ /> 
 
<！ - 可放置区域 - > 
< div class =style =z-index：1; position：fixed; right：124px; top：60pxid =div1ondrop =drop（event） ondragover = 的AllowDrop（事件）; > < a href =＃>< img id =dropzon_imagesrc =<？php echo IMAGE_PATH_HTTP？> babbler_btn.jpgalt =border =0style =cursor： cursor：hand;/>< / a> 
< div id =overlaystyle =display：none; z-index：2; position：fixed; right：0px; top：32px; cursor：pointer; border-color：blueviolet;> 
< img id =drop_imagesrc =<？php echo IMAGE_PATH_HTTP？> drop_image.jpgalt =border =1style =cursor：pointer; cursor：hand;/ > 
< / div> 
< / div> 
  

JS：

  function allowDrop（ev）{
 ev.preventDefault（）; 
} 
 
函数drag（ev）{
 ev.dataTransfer.setData（Text，ev.target.id）; 
 $（＃div1）。find（＃overlay）。slideDown（）; 
 setTimeout（function（）{
 $（＃overlay）。hide（）; 
}，4000）; 
} 
 
函数drop（ev）{
 var id = ev.dataTransfer.getData（Text）; / *暗示解决方案* / 
 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））; 
} 
  

解决方案

Firefox要求用户运行事件中的 dataTransfer.setData 函数。

对于您 jQuery 用户，这意味着以下代码可以解决您的问题：

  function dragstartHandler（event）{
 
 event.originalEvent.dataTransfer.setData（'text / plain'，'anything'）; 
 
} 
  

同一个拖动的未来事件现在将正常启动预期。显然，您可以用更有用的数据替换 setData 参数。

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/

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:

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));
}

解决方案

Firefox requires that a user run the dataTransfer.setData function in the event.

For you jQuery users, that means the following code should resolve your issue:

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 setData arguments with more useful data.

这篇关于拖放在Firefox中无法工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！