6

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>
j0k
  • 22,600
  • 28
  • 79
  • 90
user1070827
  • 123
  • 1
  • 7

4 Answers4

7

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

Andrew Morton
  • 24,203
  • 9
  • 60
  • 84
  • -1 Thats no answer. Esp. when someone else posted the link one day before you in the comments. – Christoph Mar 19 '12 at 08:27
  • 1
    @Christoph: that someone was me. Nickolay wrote that I should have posted it as an answer. Please undo the -1. – Andrew Morton Mar 19 '12 at 09:32
  • well, didn't look for the name, I'm sorry;) Edit your answer. so i can revote. – Christoph Mar 19 '12 at 09:39
  • @AndrewMorton there is a way, simply mention it in your answer, and possibly delete your comment... – Madara's Ghost Mar 19 '12 at 11:45
  • Guys, I've put a 100 rep bounty on this question, please show some effort. Explain your answer, what's done in there. Just posting the link is not a good example of an answer. – Madara's Ghost Mar 19 '12 at 17:45
  • 1
    @AndrewMorton I wish you'd explain your answer a bit more. I won't manually award you the bounty for this kind of answer (Which would mean you'd get 50 points instead of the 110 you can get). Please explain what's in the link, show an example, and tell why this is what the OP needs. If you do that I'll award you the bounty, and give you a cookie. – Madara's Ghost Mar 23 '12 at 10:53
  • 1
    Good job. +1 and bounty awarded. – Madara's Ghost Mar 23 '12 at 18:02
  • can u help me with this...I have tried implementing Drag and Drop using Jquery Ui ....http://stackoverflow.com/questions/15320455/drop-elements-inside-iframe-only-else-revert – Dharmesh Mar 16 '13 at 12:21
0

Check out the tutorial for Cross-Frame Drag and Drop. It explains the events required and the basic flow when working with multiple frames. http://blog.dockphp.com/post/78640660324/cross-browser-drag-and-drop-interface-development-using

Kshitiz
  • 2,852
  • 5
  • 32
  • 41
  • Hi, is this the same technology you used on your stackhive? html5 drag and drop? I was trying to use jquery ui dragdrop/sortable but it's failing badly on iframe, which I had to modify some stuff just to make it work. I was leaning towards moving to html5. – Victor Soto Mar 09 '15 at 06:48
  • That is an old post for the previous version of StackHive (dockPHP). I used that for dockPHP but had to improve it a lot for StackHive. The basic working remains the same though.. utilizing HTML5 Drag and Drop API. – Kshitiz Mar 09 '15 at 07:46
  • Thanks for the reply! Great stuff on stackhive ;) – Victor Soto Mar 09 '15 at 07:53
0

How are the iframes hosted? are you just using html files? as this could potentially be the issue.

I created a couple of html files with the drag and drop code in your question, this didn't work when just referencing each other. However when I added the files to IIS server and referenced the files using localhost it then started to work.

kiwijus
  • 1,217
  • 1
  • 20
  • 40
0

I modified your script to work in the case that the iframe name is "frame1". Please check it now.

<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();
    }
}

Ahmed Hashem
  • 360
  • 1
  • 10