2012-01-08 71 views
2

我正在爲iPad專門構建一個網站。我試圖讓拖動&下降工作,但ondrop事件似乎永遠不會因爲某種原因而開火。OnDrop事件從未針對Safari發起過

當我在上面放置一個元素時,能否幫助我檢測div?

我有一個非常簡單的HTML頁面,表明onrop事件永遠不會在Safari中觸發。這在桌面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> 

回答

12

您需要取消dragover事件的默認操作,然後才能使用drop事件的東西,否則瀏覽器會忽略它。如果您使用內聯事件註冊,你必須使用event來傳遞,而不是e事件

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

從此改變你的DropTarget <div>

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

了這一點。