How To Display Content Of DIV Tag Of A HTML Page On Second Monitor Screen?

I need to display content of DIV tags on multi monitor screens scenario. On my HTML page, we are having four DIV with contents. All for tags having drag-drop functionality implemen

Solution 1:

I dont really understand your question, but this might help you.

For dragging implemention:

Try use interact.js http://interactjs.io/ (JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers )

Here is an example similar to what you need. see here http://nathanleclaire.com/blog/2014/01/11/dragging-and-dropping-images-from-one-browser-tab-to-another-in-angularjs/

You will have to open two browser tabs of the same site/webapp. For example; on the left is your source and on the right (monitor) is your dropping point.

I hope it helps you.

Solution 2:

Even if I do agree with @Quentin's answer that it is impossible,

Here is the closest I can think of :
- but I'm not sure it will open in the dropped screen, this is most likely really dependent of the os,
- and users will need to click into the popup to get the page goes fullscreen.

var drag = document.getElementById('drag');
drag.draggable = true;
drag.addEventListener('dragover', function(e){e.preventDefault();}, false);
drag.addEventListener('dragstart', function(e){e.dataTransfer.setData('text/plain', '');}, false);
drag.addEventListener('dragend', openClone, false);

function openClone(e){
    // create a clone of our div
    var elem = drag.cloneNode(true);
    // create a new script element that will contain the fullscreen code
    var script = document.createElement('script');
    script.innerHTML = 'document.onclick='+polyFullScreen.toString();
    elem.appendChild(script);
    // create a new blob from our div
    var blob = new Blob([elem.outerHTML], {
         type: "text/html"
        });   
    // make it into an objectUrl
    var url = window.URL.createObjectURL(blob);
    // open the popup
    var popup = window.open(url, "popup" ,'width="100%", height="100%"');
    }

var polyFullScreen = function(e){
    var elem = e.target;
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
};

JSFiddle