2012-01-08 17 views
2

iPad向けのWebサイトを構築しています。私はドラッグを取得しようとしている&ドロップするが、ondropイベントは何らかの理由で決して発射されないようだ。OnDropイベントはSafariで一度も実行されません

divの上に要素をドロップすると検出するのを助けることができますか?

私は、ondropイベントがSafariで決して発動されないことを示す非常に単純なHTMLページを持っています。これはデスクトップのサファリでも失敗します& 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

あなたは、あなたがそうでなければ、ブラウザはそれを無視し、何かのためdropイベントを使用する前にdragoverイベントのデフォルトアクションをキャンセルする必要があります。

このことから、あなたのDropTargetの <div>を変更

:あなたはインラインイベント登録を使用している場合は、代わりにeのイベントを渡すためeventを使用する必要が

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

:これに

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

関連する問題