How to drag and drop iframe between two div

See more:

ASP.NET

Javascript

HTML

Hi,
I want to drag and drop iframe between two div. two div having two iframe,I want to drag the first iframe to second div. Aslo when the first iframe dropped in the second div, the second iframe should be come to first div. like exchange the position of the iframes. please give a solution for this. thanks in advance.


the funny thing is, it was working if I drop the iframe to other div(its not contains iframe). if I drop the iframe containing div, iframe is not allowing to drop. because its occupying full div. but i need to drop.

What I have tried:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" class="dropped" >        
        <iframe id="frame" draggable="true" ondragstart="drag(event)" ></iframe>           
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" class="dropped" >
        <iframe id="frame" draggable="true" ondragstart="drag(event)" ></iframe>            
    </div>

javascript,

function drag(event)
    {
        event.dataTransfer.setData("text", event.target.id);
    }

    function drop(event)
    {
        event.preventDefault();
        var data = event.dataTransfer.getData("text");
        event.target.appendChild(document.getElementById(data));
    }

    function allowDrop(ev)
    {
        event.preventDefault();
    }