拖放交叉帧使用html5

use*_*827 6 html5 drag-and-drop

我知道如何使用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>
Run Code Online (Sandbox Code Playgroud)

And*_*ton 7

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

}
Run Code Online (Sandbox Code Playgroud)

它适用于iframe和浏览器窗口之间(仅在Windows 7 x64上的Firefox 11和IE9中测试).