Jump to content
  • Advertisement
Sign in to follow this  
gretty

Why wont Safari bloody detect an ondrop event?

This topic is 2530 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello

I have a webpage specifically for the iPad. I am attempting to get drag & drop to work but the ondrop event seems to never fire for some reason.

Can you help me get the div to detect when I drop an element on top of it?

I have a very simple HTML page that demonstrates that the ondrop event is never fired in Safari. This fails in both desktop safari & ipad safari:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style type="text/css">
<!--
body {
margin: 100px;
}

.dropTarget {
width: 300px;
height: 100px;
float: left;
display: inline;
margin: 10px;
background-color: green;
-webkit-user-drop: element;
}

.drag {
width: 100px;
height: 100px;
background-color: red;
-webkit-user-drag: element; /*element*/
}

-->
</style>
<script type="text/javascript">
<!--
function onDrop(e, ele) { alert("drop"); }
-->
</script>
</head>
<body>

<div class="drag">
</div>
<br/>

<div class="dropTarget" ondrop="onDrop(e,this);">
</div>
<br/>

</body>
</html>

Share this post


Link to post
Share on other sites
Advertisement
I believe the dropTarget needs to have handlers for ondragover and ondragenter. Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style type="text/css">
<!--
body {
margin: 100px;
}
.dropTarget {
width: 300px;
height: 100px;
float: left;
display: inline;
margin: 10px;
background-color: green;
-webkit-user-drop: element;
}
.drag {
width: 100px;
height: 100px;
background-color: red;
-webkit-user-drag: element; /*element*/
}
-->
</style>
<script type="text/javascript">
<!--
function doDrop(e, element) {
alert("drop"); return false;}
-->
</script>
</head>
<body>
<div class="drag">
foo
</div>
<br/>
<div class="dropTarget" ondrop="return doDrop(event, this);" ondragover="return false;" ondragenter="return false;" >
</div>
<br/>
</body>
</html>


It works for me in Chrome (which is Webkit, i.e. Safari, basically).

Share this post


Link to post
Share on other sites
Thanks for the reply, it works on Chrome but not on Safari.

Maybe its just my Safari version? But it also doesn't work in iPad. Is it just me lol?

I have even placed the apple meta tags that disable scaling(zooming) on iPad for webpages & it still doesn't work.

Share this post


Link to post
Share on other sites
Actually, I now tried in Safari (5.1.2) and it does not work for me either. So I tried some other sample pages I found for the ondrop Event (e.g. http://help.dottoro.com/ljbflwps.php) and none of them worked. We have (Qt-)Webkit integrated in our software and it behaves the same as Safari. So apparently something else is required to make it work on Safari and Vanilla Webkit.

What does work though, is the drag-and-drop functionality of scriptaculous (http://script.aculo.us/), so you might want to take a look at that and how they implemented it.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!