перетащить кросс-кадры использовать 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

@ Николай: о, хорошо.

Есть пример на 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;
        }
    }

}

Он работает между iframes и между окнами браузера (проверено только в Firefox 11 и IE9 на Windows 7 x64).

Answer 2

Как размещаются фреймы? Вы просто используете HTML-файлы? так как это потенциально может быть проблемой.

Я создал пару html-файлов с кодом перетаскивания в вашем вопросе, это не сработало, когда просто ссылались друг на друга. Однако, когда я добавил файлы на сервер IIS и сослался на файлы с помощью localhost, он начал работать.

Answer 3

Ознакомьтесь с учебником для Cross-Frame Drag and Drop.Он объясняет необходимые события и основной поток при работе с несколькими кадрами.http://blog.dockphp.com/post/78640660324/cross-browser-drag-and-drop-interface-development-using

Answer 4

Я изменил ваш скрипт для работы в случае, если имя 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();
    }
}