Событие OnDrop никогда не запускалось для Safari - PullRequest
Новая
       16

Событие OnDrop никогда не запускалось для Safari

3 голосов
/ 09 января 2012

Я создаю сайт специально для iPad. Я пытаюсь заставить работать drag & drop, но событие ondrop, похоже, никогда не срабатывает по какой-то причине.

Можете ли вы помочь мне определить, когда div определяет, когда я бросаю элемент поверх него?

У меня есть очень простая HTML-страница, которая демонстрирует, что событие ondrop никогда не запускается в Safari. Это не удается как в настольном сафари, так и в сафари на ipad. 

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

1 Ответ

12 голосов
/ 17 февраля 2012

Вам нужно отменить действие по умолчанию для события dragover, прежде чем вы сможете использовать событие drop для чего-либо, в противном случае браузер игнорирует его.

Измените свой dropTarget <div> на это: 

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

На это: 

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

Если вы используете встроенную регистрацию событий, вы должны использовать event для передачи события вместо e.

...