Javascript 我的拖放功能解决方案在firefox中不起作用
我正在我的网站上实现简单的拖放功能。它的工作原理与拖放图像有关。但是,现在我想将删除的图像保存到服务器中。为此,我已将视图中的图像数据作为隐藏元素包含在内,要在jQuery中访问此数据,我需要删除图像id。我已尝试从以下代码中获取此信息,这在chrome中非常有效,但在firefox中不起作用。请帮助: 代码:Javascript 我的拖放功能解决方案在firefox中不起作用,javascript,jquery,google-chrome,firefox,drag-and-drop,Javascript,Jquery,Google Chrome,Firefox,Drag And Drop,我正在我的网站上实现简单的拖放功能。它的工作原理与拖放图像有关。但是,现在我想将删除的图像保存到服务器中。为此,我已将视图中的图像数据作为隐藏元素包含在内,要在jQuery中访问此数据,我需要删除图像id。我已尝试从以下代码中获取此信息,这在chrome中非常有效,但在firefox中不起作用。请帮助: 代码: view <!-- dragable image --> <a href="#?w=976" rel="popup1" id="<?=$albu
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));
}
视图
拖到这里
document.getElementById('dragable').ondragover=函数(e){e.preventDefault();}
document.getElementById('dragable').ondrop=function(e){upload_drop(e);}
功能上传和下载(e){
e、 预防默认值();
警报(“拖放工作”);
}
拖到这里
document.getElementById('dragable').ondragover=函数(e){e.preventDefault();}
document.getElementById('dragable').ondrop=function(e){upload_drop(e);}
功能上传和下载(e){
e、 预防默认值();
警报(“拖放工作”);
}
将HTML和JS发布到jsfiddlehi我已经更改了问题,因为我得到了上一个问题的解决方案,请参考更改的问题,我不知道如何使用JS fiddle,因此很抱歉给您带来不便。这里是JS fiddle将HTML和JS发布到jsfiddlehi我已经更改了问题,因为我得到了上一个问题的解决方案,请参考更改的问题,我不知道如何使用js fiddle,因此很抱歉给您带来不便。这里是js fiddle
<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.');
}