JSFiddle - React, Tailwind, and code Playground
HTML
<div id="drag" draggable>
copy This text and following image :
<img src="http://lorempixel.com/200/300"/>
</div>
<div>
but not this
</div>
JavaScript
var drag = document.getElementById('drag');
drag.draggable = true;
drag.addEventListener('dragend', openClone, false);
drag.addEventListener('dragover', function(e){e.preventDefault();}, false);
drag.addEventListener('dragstart', function(e){e.dataTransfer.setData('text/plain', '');}, false);
function openClone(e){
var elem = drag.cloneNode(true);
var script = document.createElement('script');
script.innerHTML = 'document.onclick='+polyFullScreen.toString();
elem.appendChild(script);
var blob = new Blob([elem.outerHTML], {
type: "text/html"
});
var url = window.URL.createObjectURL(blob);
var popup = window.open(url, "popup" ,'width="100%", height="100%"');
}
var polyFullScreen = function(e){
var elem = document.body;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
};