javascript - html中的可拖动元素

Question

我想使单击文件夹图标时弹出 的元素可以拖动，它是名为janela 的div。我希望能够让它在屏幕上移动。我不知道为什么我不能让它可拖动，

我尝试了 w3schools 网站上的内容，但无法在我获得的代码上使用它。我还想让窗口落在你用鼠标停止拖动它的地方

///////////////////////////////////////////////////////////////DOCUMENTOS//////////////////////////////////////////
function openDocs(){
    document.getElementById("janela").innerHTML = document.getElementById("docwindow").innerHTML;
    /*var size = document.getElementsByClassName("documents").children.length;
    for(j = 0; j < size; j++){
        document.getElementsByClassName("documents").children[j].addEventListener("click", function() {openFile()});
    }
    */
}

function closeMain(){
    document.getElementById("janela").innerHTML = "";
}

function openFile(){
    console.log("abriu");
}

/////////////////////////////////////////////////////////DRAGABBLE ELEM//////////////////////////////////////////////////////
dragElement(document.getElementById("docwindow"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV: 
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
   

html, body {
    width: 3779.527559055px;
   height: 100%;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   color: #444;
   -webkit-font-smoothing: antialiased;
   background-image: url("https://images4.alphacoders.com/111/111298.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 350% 100%;
   font-family: Arial, Helvetica, sans-serif;
}

zoom{
zoom:25%;
}
  /************************************************MAIN************************************/
  #janela{
    position: absolute;
    width:1900px;
    height:1500px;
    left:1500px;
    top:550px;
    border-radius:none;
  }

  #closeDocs{
    width: 75px;
    height: 75px;
    background-color: none;
    padding:5px;  
    top: 35px;
    position: absolute;
    right:20px;
  }

  #docsHeadTexto{
    color:black;
    text-align:center;
    text-shadow: 3px 2px grey;
    font-size:50px;
    top: 20px;
    position: relative;
  }

  .windowTop{
    height: 100px;
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
  }

  #DocImg{
    width: 400px;
    height: 400px;
    background-color: none;
    padding:40px;
  }

  #bottomWindowDocs{
    background-color:white;
    height:1415px;
    border-bottom-left-radius:5%;
    border-bottom-right-radius:5%;
  }

  #DocEx{
    position: absolute;
    left:140px;
    top:575px;  
  }
  

<!DOCTYPE html>
<html>
<head>
<title>Desk+ - Grupo 36</title>
<link rel="stylesheet" type="text/css" href="PF1.1.css">
<script src="PF1.1.js"></script>
</head>
<body>

   

<div id="DOCS">
<img id="documentos_logo" src="https://marketplace.canva.com/MAB7OE9Jppw/1/thumbnail_large/canva-folder-file-yellow-document-info-icon.-vector-graphic-MAB7OE9Jppw.png" alt="documentos" onclick="openDocs()">
</div>

<div id="janela">
</div>

<div id="docwindow" style="display: none;">
    <div id="docwindowheader">
    <header class="windowTop">
        <h1 id="docsHeadTexto">Documentos</h1>
    <img  id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()">
    </header>
</div>

<div id="bottomWindowDocs">
    <div class="documents">
        <div>
            <img id="DocImg" ondragstart="drag(event)" draggable="true" src="http://download.seaicons.com/download/i85597/graphicloads/100-flat/graphicloads-100-flat-note.ico" alt="doc">
            <h1 id="DocEx">Doc-exemplo</h1>
        </div>
    </div>
    <div id="DocExemplo" style="display:none;">
        <header class="windowhead">
            Documento exemplo
            <img class="X" src="https://banner2.kisspng.com/20180402/dwe/kisspng-computer-icons-social-media-email-webmail-cancel-button-5ac240963875f3.0504665115226799582313.jpg" alt="X" onclick="closeMain()">
            <button id="share">share</button>
            <button id="back">back</button>
        </header>
        <div id="corpo">
            <h4>Este é um exemplo de Documento</h4>
        </div>
    </div>
</div>
</div>

  

</body>
</html>

将页面全屏并放大 25%，这样您就可以看到所有内容

Answer 1

@Rui，我试着调查一下这个问题。

在非常高的层次上，我的理解是您甚至在加载 DOM 之前就尝试调用下面的代码。我

 dragElement(document.getElementById("docwindow"));

所以我的建议是在加载 DOM 后加载 javascript 以实现此目的，您可以做两件事。

1. 加载 HTML 底部的 js，就在
之前
2. 或者在 js 中将整个代码更改包装在 DOMContenLoaded 事件中。

   window.addEventListener('DOMContentLoaded', (event) => {
    // your code goes here
   });

我认为，如果您可以执行其中任何一项，则可以通过相应地更改代码来找到您的解决方案。

如果您还需要什么，请告诉我。