drayarms Posted June 20, 2012 Share Posted June 20, 2012 Hello, Just in case the topic wasn't very clear, I'm talking about the functions triggered by the ondragstart, ondrop and ondragover events in HTML5. I just used that for my first time and from what I gathered, it doesn't seem like these functions would be defined within another jS/jQ function for instance within a document.ready function. What I was trying to accomplish was to place these functions within other functions in my script in order to call local variables within those functions when the drag and drop events were triggered. well I found out that this is seemingly impossible. I'll provide two simple examples to illustrate the point in case it's unclear. Example 1, which works <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js </script> <script type="text/javascript"> //Drag and drop events function allow_drop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Drag Drop</title> </head> <body> <div id="div1" style = "height:400px;width:450px;background:yellow" ondrop="drop(event)" ondragover="allow_drop(event)"> Drop here <div style = "height:130px;width:130px;background:green"> </div> </div> <br /> <div id ="blue_box" style = "height:100px;width:100px;background:blue" draggable="true" ondragstart="drag(event)"> </div> </body> </html> And this is what I'm trying to accomplish which of course doesn't work. Is there a workaround? <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var message1 = "just dragged"; var message2 = "just dropped" //Drag and drop events function allow_drop(ev){ ev.preventDefault(); alert(message1); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); alert(message2); } });//End document ready method </script> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Drag Drop</title> </head> <body> <div id="div1" style = "height:400px;width:450px;background:yellow" ondrop="drop(event)" ondragover="allow_drop(event)"> Drop here <div style = "height:130px;width:130px;background:green"> </div> </div> <br /> <div id ="blue_box" style = "height:100px;width:100px;background:blue" draggable="true" ondragstart="drag(event)"> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
trq Posted June 20, 2012 Share Posted June 20, 2012 Your using jQuery. Why are you still attaching events inline? Quote Link to comment Share on other sites More sharing options...
drayarms Posted June 20, 2012 Author Share Posted June 20, 2012 @thorpe, followed your advice, tried to use the jQ UI functionality instead but that led to a new problem. Can you take a look at my new posting titled "How Can Elements Generated on the Fly be Made Draggabble?" Tnanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.