Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

drag and drop cross frames use html5

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>
like image 662
user1070827 Avatar asked Mar 15 '12 16:03

user1070827


People also ask

How to use drag and drop in HTML5?

How to use drag and drop in HTML5? Drag and Drop (DnD) is powerful user interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

What is drag and drop in DND?

Drag and Drop (DnD) is powerful user interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

How to make an element draggable in CSS?

Making an element draggable is as simple as setting the draggable attribute of an element to true 2. What happens when an element is dragged? Once you have a draggable element, you can call an ondragstart event handler and pass it a function that does whatever you want. 3. Where to drop an element?

What are drop zones in HTML markup?

Also, on in our HTML markup, we have 7 divs which all have functions passed to their ondragover and ondrop event handlers. These are our ‘drop zones’. The drag and drop API has a dataTransfer object that holds the data that is being dragged during a drag and drop operation.


1 Answers

@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).

like image 140
Andrew Morton Avatar answered Sep 28 '22 04:09

Andrew Morton