我的拖放功能的解决方案不适用于Firefox [英] my solution for drag drop functionality is not working in firefox

问题描述

我正在实现简单的拖放功能到我的网站。它可以正常工作，可以根据图像的拖放情况进行操作。但是，现在我想将丢弃的图像保存到服务器中。为此，我已经包含了有关图像的隐藏元素的数据，要访问jQuery中的这些数据，我需要删除图像ID。我已经尝试从下面的代码中获得它的工作是伟大的铬，但不在Firefox中请帮助：
$ b

代码：

 视图<！ - 可拖曳图片 - > 
< 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]>？/> 
 
 <！ -  dropable area  - > 
 
< div class =style =z-index：1; position：fixed; right：124px; top：60pxid =div1ondrop =drop（event）;;  ondragover = 的AllowDrop（事件）; > < A HREF = ＃ >< IMG ID = dropzon_image SRC = < PHP的回波IMAGE_PATH_HTTP> babbler_btn.jpg？ ALT =  BORDER = 0 风格=光标：指针; 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 * / 
函数allowDrop（ev）
 {
 ev.preventDefault（）; 
 
 
 $ b function drag（ev）
 {
 ev.dataTransfer.setData（Text，ev.target.id）; 
 $（＃div1）。find（＃overlay）。slideDown（）; 
 setTimeout（function（）{$（＃overlay）。hide（）;}，4000）; 
 
 
 $ b function drop（ev）
 {
 
 var id = ev.dataTransfer.getData（Text）; *实施的解决方案* / 
 
 alert（id）; 
 
 
 ev.preventDefault（）; 
 var action ='download'; 
 var wall_id = '62'; 
 var stat ='相册'; 
 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））; 
 
  

解决方案

http://jsfiddle.net/TFv3a/

 < a id =dragablestyle =display：block; width：100px; height：100px; border：1px solid red;> Drag here< / a> 
 
 document.getElementById（'dragable'）。ondragover = function（e）{e.preventDefault（）; } 
 document.getElementById（'dragable'）。ondrop = function（e）{upload_drop（e）; } 
 
 
函数upload_drop（e）{
 e.preventDefault（）; 
 alert（'drag and drop works。'）; 
} 
  

I'm implementing simple drag and drop functionality into my website. It works fine as per drag and drop of image concerns. However, now I want to save dropped image into the server. For that I have included data regarding image in view as hidden elements, to access this data in jQuery I need dropped image id. I have tried getting this from following code it work's great in chrome but doesn't in firefox please help :

code:

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

解决方案

http://jsfiddle.net/TFv3a/

<a id="dragable" style="display:block;width:100px;height:100px;border:1px solid red;">Drag here</a>

document.getElementById('dragable').ondragover = function(e){e.preventDefault();  }
document.getElementById('dragable').ondrop = function(e){ upload_drop(e); }


function upload_drop(e){
e.preventDefault();
alert('drag and drop works.');
}

这篇关于我的拖放功能的解决方案不适用于Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！