javascript - drag and drop not working in firefox -
i have implemented drag , drop functionality in jquery , html5 , working great in chrome stuck in firefox following code alerting id of dropped image appears undefined in firefox following code , please . 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 user run datatransfer.setdata function in event.
for jquery users, means following code should resolve issue:
function dragstarthandler(event){ event.originalevent.datatransfer.setdata('text/plain', 'anything'); } future events on same drag fire expected. can replace setdata arguments more useful data.
Comments
Post a Comment