Hi everyone, I'm having some troubles with draggable images inside a div (overflow: auto; position: relative). If I scroll the div to drag an image in the newly displayed area, there's quite a gap between the mouse pointer and the image i'm dragging.
I'm using a 2 column CSS design (that's to explain the position: relative style of the div container, and it seems to cause my bug ! though if you remove it, you'd trigger another problem .. well, whatever). This happens in both FF3 and IE6. I'd say the offset between the mouse cursor and the draggable = containning div.scrollLeft Here's how you could test it yourself : (try dragging the Drag 1 or 2 boxes once you scrolled a little the containning div to the right) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="fr" lang="fr"> <head> <title>testbug</title> <script type="text/javascript" src="js/scriptaculous/ prototype.js"></script> <script type="text/javascript" src="js/scriptaculous/ scriptaculous.js?load=effects,dragdrop"></script> <style type='text/css'> .geoparc { overflow: auto; border: 1px solid #ddd; width: 300px; position: relative; } .todrag { width: 50px; height: 30px; top: 10px; left: 0px; border: 1px solid blue; color: green; cursor: move; } </style> </head> <body> <script type="text/javascript"> //<![CDATA[ init = function() { // Who's dragged ? var id_div = 'container'; var drag_obj = $(id_div).getElementsByClassName('todrag'); // find out what to drag // Make them draggable for(i = 0; i < drag_obj.length; i++) { var curr_obj = drag_obj[i]; new Draggable(curr_obj, { scroll: id_div , ghosting: true } ); } } // IE ou Firefox onload attach if (window.attachEvent) window.attachEvent("onload", init); if (window.addEventListener) window.addEventListener( "load", init, false ); //]]> </script> <div id="container" class="geoparc"> <img src="http://script.aculo.us/scriptaculous_logo.png"; alt="big wide pic" /> <div class="todrag">Drag 1</div> <div class="todrag">Drag 2</div> </div> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
![http://script.aculo.us/scriptaculous_logo.png"](http://script.aculo.us/scriptaculous_logo.png"){kind=link}