Can HTML5 Drag/Drop Functions be Placed within JS Functions?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Can HTML5 Drag/Drop Functions be Placed within JS Functions?

Post by drayarms »

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

Code: Select all




<!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?

Code: Select all




<!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>






User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Can HTML5 Drag/Drop Functions be Placed within JS Functi

Post by pickle »

http://www.quirksmode.org/blog/archives ... _drag.html

If you want cross-browser, use jQuery draggable.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply