CODEWITHSUNDEEP
javascripthtmlcssdrag-and-dropwebkit
sazr
sazr

Reputation: 25928

OnDrop Event never fired for Safari

I am building a website 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>

Upvotes: 3

Views: 5320

Answers (2)

Amit Gore
Amit Gore

Reputation: 451

Another reason might be:

In reference with the drag-and-drop-processing-model, the drop event surprisingly does not get fired if the platform is changing the e.dataTransfer.dropEffect which (preferably should match) is not matching with e.dataTransfer.effectAllowed property of the event.

enter image description here

Upvotes: 2

bryc
bryc

Reputation: 14947

You need to cancel the dragover event's default action before you can use the drop event for something, otherwise the browser ignores it.

Change your dropTarget <div> from this:

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

To this:

<div class="dropTarget" ondragover="return false;" ondrop="onDrop(event,this);">

If you use inline event registration you have to use event to pass the event instead of e.

Upvotes: 12

Related Questions