chrome dragging iframe

by cpwinn

HTML

<div id="dragcontainer">
  <div id="div1drag" style="width: 100px; height: 100px; background: red; text-align:center;">
    <span id="dragme" draggable="true" style="color: white; line-height:100px;">Drag me</span>
  </div>
  <div id="div2drag" style="width: 100px; height: 100px; background: blue; text-align:center;">
  </div>
</div>
Drag the text above between the red box and the blue box.
Click the button to switch between iframe and img.
<button id="switch" type="button">Toggle img or iframe</button>
<br/>
Dragstart count: <span id="dragstartCount">0</span>
<br/>
Dragend count: <span id="dragendCount">0</span>
<br/>

<br/>

<div id="div1" style="width: 400px; height: 200px; background: red;">

</div>
<div id="div2" style="width: 400px; height: 200px; background: blue;">

</div>

<div id="div3" style="display: none">
</div>

JavaScript

var div1drag = document.getElementById('div1drag');
div1drag.ondragover = dragover;
div1drag.ondrop = drop;
var div2drag = document.getElementById('div2drag');
div2drag.ondragover = dragover;
div2drag.ondrop = drop;
var dragme = document.getElementById('dragme');
dragme.ondragstart = dragstart;
dragme.ondragend = dragend;
var button = document.getElementById('switch');
button.onclick = toggle;

var dragstartCount = 0;
var dragendCount = 0;

var imgVisible = true;

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com/';
iframe.id = 'iframe';

var img = document.createElement('img');
img.src = 'http://lorempixel.com/200/200/';
img.id = 'item';

var div1 = document.getElementById('div1');
div1.appendChild(img);
var div3 = document.getElementById('div3');
div3.appendChild(iframe);

function toggle(e) {
	if(imgVisible) {
		var img = document.getElementById('item');
		img.id = 'img';
		var iframe = document.getElementById('iframe');
		iframe.id = 'item';
		img.parentNode.replaceChild(iframe, img);
		document.getElementById('div3').appendChild(img);
	}
	else {
		var iframe = document.getElementById('item');
		iframe.id = 'iframe';
		var img = document.getElementById('img');
		img.id = 'item';
		iframe.parentNode.replaceChild(img, iframe);
		document.getElementById('div3').appendChild(iframe);
	}
	imgVisible = !imgVisible;
}

function dragover(e) {
	e.preventDefault();
}

function drop(e) {
  e.preventDefault();
	var item = document.getElementById('item');
	var element = e.srcElement || e.target;
	if(element.id === 'div1drag') {
		window.setTimeout(function() {
    	document.getElementById('div1').appendChild(item);
    }, 0)
	}
	else if(element.id === 'div2drag') {
		window.setTimeout(function() {
    	document.getElementById('div2').appendChild(item);
    }, 0)
	}
	element.appendChild(document.getElementById('dragme'));
}

function dragstart(e) {
  e.dataTransfer.setData('text', 'abc'); ...