拖放交叉框架使用html5

我知道如何使用html5在一個窗口中拖放。但是如何拖放跨幀？這是我的腳本，可以在一個窗口中工作。有人能幫我嗎？拖放交叉框架使用html5

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

來源

2012-03-15 user1070827

其實我不知道該如何幫助你，這是一個很好的問題。一旦2天的限制過去，我會給予獎勵。 – 2012-03-16 17:16:03

好問題;有一個jsfiddle，我可以與周圍混亂？：p – sg3s 2012-03-17 20:44:55

http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/ – 2012-03-17 21:23:07

@Nickolay：哦，好的。

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

補充：

我不知道爲什麼OP的代碼沒有工作 - 也許它不是在兩個框架加載？我修改了自己的Javascript一點給予更多的適應症：

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; 
     } 
    } 

}

它的工作原理I幀之間和瀏覽器窗口（僅在Firefox 11和IE9測試在Windows 7 64位系統）之間。

來源

2012-03-19 07:25:23

-1那沒有答案。 ESP。當其他人在評論前一天發佈鏈接時。 – Christoph 2012-03-19 08:27:06

@Christoph：那個人就是我。 Nickolay寫道，我應該發佈它作爲答案。請撤消-1。 – 2012-03-19 09:32:27

好吧，沒找到名字，我很抱歉;）編輯你的答案。所以我可以複製。 – Christoph 2012-03-19 09:39:51

我修改了你的腳本，在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(); 
    } 
}

來源

2012-03-23 17:35:53

檢查出交叉框架拖放的教程。它解釋了使用多個幀時所需的事件和基本流程。 http://blog.dockphp.com/post/78640660324/cross-browser-drag-and-drop-interface-development-using

來源

2014-03-06 07:28:49

嗨，這是你在stackhive上使用的技術嗎？ html5拖放？我試圖使用jquery ui dragdrop/sortable，但它在iframe上失敗了，爲了使它工作，我不得不修改一些東西。我傾向於轉向html5。 – 2015-03-09 06:48:21

這是舊版StackHive（dockPHP）的舊帖子。我用於dockPHP，但不得不改善StackHive。儘管利用HTML5 Drag and Drop API，基本工作仍然保持不變。 – 2015-03-09 07:46:53

感謝您的回覆！偉大的東西在stackhive;） – 2015-03-09 07:53:52

iframe是如何託管的？你只是使用HTML文件？因爲這可能是問題所在。

我用你的問題中的拖放代碼創建了幾個html文件，當相互引用時這不起作用。但是，當我將這些文件添加到IIS服務器並使用本地主機引用這些文件時，它就開始工作了。

來源

2015-11-27 21:07:37 kiwijus

拖放交叉框架使用html5

回答

相關問題