我的拖放功能的解决方案不适用于Firefox [英] my solution for drag drop functionality is not working in firefox
本文介绍了我的拖放功能的解决方案不适用于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));
解决方案
< 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));
}
解决方案
<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屋!
查看全文