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>