drag and drop cross frames use html5

Question

I know how to drag and drop in one window with html5. But how to drag and drop across frames? Here is my script which can work in one window. Can someone 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

@Nickolay: oh, ok.

There's 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's code didn't work - maybe it wasn't loaded in both frames? I modified their Javascript a little to give more indications:

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 (only tested in Firefox 11 and IE9 on Windows 7 x64).