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> Link to comment https://forums.phpfreaks.com/topic/264478-can-html5-dragdrop-functions-be-included-within-other-js-functions/ 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? Link to comment https://forums.phpfreaks.com/topic/264478-can-html5-dragdrop-functions-be-included-within-other-js-functions/#findComment-1355430 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 Link to comment https://forums.phpfreaks.com/topic/264478-can-html5-dragdrop-functions-be-included-within-other-js-functions/#findComment-1355635 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.