Question

我正在建立专门针对iPad的网站。我试图得到拖累和放大下台工作但是ondrop事件似乎从来没有因某种原因而发生过。

你可以帮助我让div检测到什么时候把元素放在它上面吗？

我有一个非常简单的HTML页面，它表明在Safari中永远不会触发ondrop事件。这在桌面游戏和桌面游戏中都失败了。 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>

Answer 1

您需要取消dragover事件的默认操作才能使用drop事件，否则浏览器会忽略它。

从此处更改dropTarget <div>：

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

对此：

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

如果您使用内联事件注册，则必须使用event来传递事件而不是e。

Answer 2

另一个原因可能是：

参考drag-and-drop-processing-model，如果平台更改了（preferably should match）与e.dataTransfer.effectAllowed属性不匹配的e.dataTransfer.dropEffect，则丢弃事件不会令人惊讶地被触发活动的结束。

OnDrop事件从未针对Safari发起过

2 个答案: