拖放交叉框架使用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

回答

相关问题