html - 拖放 Revel框架使用html5

Question

我知道如何用 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>

Answer 1

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

}

它在 iframe 和浏览器窗口之间工作(仅在 Firefox 11 和 Windows 7 x64 上的 IE9 中测试)。