Drag and Drop uses html5

Question

I know how to drag and drop in one window using html5. But how to drag through frames? Here is my script that can work in one window. Can anybody help me?

<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

@ Nichol: oh, good.

Here is an example at http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/ .

Added:

I'm not sure why the OP code didn't work - maybe it wasn't loaded in both frames? I modified my Javascript a bit to give more directions:

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

It works between iframes and between browser windows (it is tested only in Firefox 11 and IE9 on Windows 7 x64).

Answer 2

I changed your script to work when the iframe name is "frame1". Please check it now.

 <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

Check out the cross drag tutorial. It explains the necessary events and the main stream when working with multiple frames. http://blog.dockphp.com/post/78640660324/cross-browser-drag-and-drop-interface-development-using

Answer 4

How are iframes placed? are you just using html files? as this could potentially be a problem.

I created a couple of html files with drag and drop code in your question, this did not work when you just referred to each other. However, when I added the files to the IIS server and referenced the files using localhost, it started working.