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

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

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

JSFiddle