ドラッグアンドドロップクロスフレームhtml5を使用

Question

私はhtml5で1つのウィンドウにドラッグアンドドロップする方法を知っています。しかし、どのようにフレームにドラッグアンドドロップするのですか？ これは、1つのウィンドウで動作するスクリプトです。誰か助けてくれますか？

<script> 
    var drag = document.getElementById("drag"); 
    var drop = document.getElementById("drop"); 
    drag.onselectstart = function() { 
     return false; 
    } 
    drag.ondragstart = function (ev) { 
     ev.dataTransfer.effectAllowed = "move"; 
     ev.dataTransfer.setData("text", ev.target.innerHTML); 
    } 

    drag.ondragend = function (ev) { 
     var text = ev.dataTransfer.getData("text"); 
     alert(text); 
     ev.dataTransfer.clearData("text"); 
     return false; 
    } 

    drop.ondragover = function (ev) { 
     ev.preventDefault(); 
     return true; 
    } 

    drop.ondragenter = function (ev) { 
     this.background = "#ffffff"; 

     return true; 
    } 

    drop.ondrop = function (ev) { 

    } 
</script> 

Answer 1

@Nickolay：oh、ok。

例はhttp://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/です。

を追加しました：

私はOPのコードが機能しなかった理由はわからない - 多分それは両方のフレームにロードされていませんでしたか？

window.onload = function() { 
    var drag = document.getElementById('drag'); 
    var drop = document.getElementById("drop"); 
    if (drag) { 
     drag.style.backgroundColor = '#00ff00'; 
     drag.onselectstart = function() { 
      return false; 
     } 
     drag.ondragstart = function (ev) { 
      ev.dataTransfer.effectAllowed = "move"; 
      ev.dataTransfer.setData("text", ev.target.innerHTML); 
     } 

     drag.ondragend = function (ev) { 
      var text = ev.dataTransfer.getData("text"); 
      alert(text); 
      //ev.dataTransfer.clearData("text"); 
      return false; 
     } 
    } 

    if (drop != null) { 
     drop.style.backgroundColor = '#0000ff'; 

     drop.ondragover = function (ev) { 
      ev.preventDefault(); 
      return false; 
     } 

     drop.ondragenter = function (ev) { 
      this.style.backgroundColor = "#ff0000"; 
      return false; 
     } 

     drop.ondrop = function (ev) { 
      return false; 
     } 
    } 

} 

それは、アイフレーム間と（Windowsのみ7のx64上のFirefox 11とIE9でテスト）ブラウザのウィンドウ間で動作します：私はより多くの指標を与えるために自分のJavascriptを少し修正しました。

Answer 2

iframeの名前が「frame1」の場合にスクリプトが動作するように変更しました。今すぐ確認してください。

<script type="text/javascript"> 
window.onload = function() 
{ 
    var drag = document.getElementById("drag"); 
    var drop = frame1.document.getElementById("drop"); 
    drag.draggable = true; 
    drag.onselectstart = function() { 
     return false; 
    } 
    drag.ondragstart = function (ev) { 
     ev.dataTransfer.effectAllowed = "move"; 
     ev.dataTransfer.setData("text", ev.target.innerHTML); 
    } 

    drop.ondragover = function (ev) { 
     ev.preventDefault(); 
     return true; 
    } 

    drop.ondragenter = function (ev) { 
     this.background = "#ffffff"; 

     return true; 
    } 

    drop.ondrop = function (ev) { 
     var data = ev.dataTransfer.getData("text"); 
     drop.innerHTML += data; 
     ev.preventDefault(); 
    } 
} 

Answer 3

クロスフレームドラッグ＆ドロップのためのチュートリアルをチェックしてください。複数のフレームで作業する場合、必要なイベントと基本フローについて説明します。 http://blog.dockphp.com/post/78640660324/cross-browser-drag-and-drop-interface-development-using

Answer 4

iframeはどのようにホストされていますか？ htmlファイルを使っていますか？潜在的に問題になる可能性があるためです。

あなたの質問にドラッグアンドドロップコードでいくつかのhtmlファイルを作成しましたが、これはお互いを参照するだけではうまくいきませんでした。しかし、私はIISサーバーにファイルを追加し、localhostを使ってファイルを参照したときに動作し始めました。