SOURCE

function bindDrag(id) {
    var dashboard = document.getElementById(id);
    dashboard.addEventListener("dragover", function (e) {
        e.preventDefault()
        e.stopPropagation()
    })
    dashboard.addEventListener("dragenter", function (e) {
        e.preventDefault()
        e.stopPropagation()
    })
    dashboard.addEventListener("drop", function (e) {
        // 必须要禁用浏览器默认事件
        e.preventDefault()
        e.stopPropagation()
        var files = e.dataTransfer.files; //获取文件对象    

        var fileUrl = window.URL.createObjectURL(files[0]);
        if (files[0].type.indexOf('image') === 0) {
            showFileInfo(fileUrl);
        } else {
            console.log(files[0].type);
            $('#fileInfo').hide();
            $('#intro').hide();
            $('#notSupport').show();
            $('#uploaded').hide();
        }
        function showFileInfo(url, pos) {
            $('#viewer').html('');
            $('#viewer').show(); 
            new PhotoSphereViewer.Viewer({
                container: document.querySelector('#viewer'),
                panorama: url
            });   
            $('#intro').hide();
            bindDrag("viewer");
        }
    })
}
bindDrag("intro");

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>

<div id="viewer"></div>
 

<div id="intro">
<h1>360全景图在线浏览查看器</h1> 
<div class="container">
	<div id="dashboard" class="dashboard">
		<div id="intro">拖拽全景图到此展示</div>
        <div id="notSupport">不支持此文件</div>  
    </div>
</div>
</div>

 

#viewer {
    width: 100vw;
     height: 100vh;
     display: none;
}

* {
    margin: 0;
    padding: 0;
}

h1 {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #aaa;
}

.container {
    width: 400px;
    height: 160px;
    padding: 15px;
    margin: 20px auto 0;
    border-radius: 10px;
    background-color: #ffffff;
}

.dashboard {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px dashed rgb(236, 236, 236);
    border-radius: 5px;
}

.dashboard #intro, 
#notSupport {
    color: rgb(206, 206, 206);
    display: block;
    text-align: center;
    line-height: 150px;
    font-size: 20px;
}

#notSupport  {
    display: none;
}

[draggable] {
    /*防止可拖曳元素的文字被选中*/
    -webkit-user-select: none;
    user-select: none;
    /*可以拖曳的元素通常鼠标是十字形*/
    cursor: pointer;
}