Question

我需要在多显示器屏幕场景中显示DIV标签的内容。在我的HTML页面上，我们有四个DIV内容。全部用于实现拖放功能的标签。根据要求，用户可以选择四个中的任何一个标签，并且可以在三个监视器屏幕中的一个上拖动，并且该DIV的内容将在丢弃的监视器屏幕上以全屏模式显示。

任何人都可以建议任何实施此类要求。

Answer 1

浏览器中的JS没有对操作系统的访问级别。你不能这样做。

Answer 2

我真的不明白你的问题，但这可能会对你有所帮助。

用于拖动实现：

尝试使用interact.js http://interactjs.io/ （JavaScript拖放，调整大小和多点触控手势，惯性和捕捉现代浏览器）

这是一个类似于您需要的示例。见http://nathanleclaire.com/blog/2014/01/11/dragging-and-dropping-images-from-one-browser-tab-to-another-in-angularjs/

您必须打开同一站点/ webapp的两个浏览器选项卡。例如;在左边是你的来源，在右边（显示器）是你的下降点。

我希望它对你有所帮助。

Answer 3

即使我同意@ Quentin的答案，这是不可能的，

这是我能想到的最接近的：
- 但我不确定它会在掉线屏幕上打开，这很可能真的取决于操作系统，
- 用户需要点击弹出窗口才能让页面全屏显示。

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

如何在第二个监视器屏幕上显示HTML页面的DIV标签的内容？

3 个答案: