可拖动的 jQuery 元素答案

【问题标题】：Draggable jQuery element可拖动的 jQuery 元素
【发布时间】：2020-11-26 17:39:43
【问题描述】：

我正在尝试实现从 W3schools 到我的 js 文件的拖动操作。

这是我所指的拖拽的链接。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable

下面是我的 js 文件，它制作了一个 div 并实现了 w3schools 的拖动功能。

first.js

function makediv() {
        var mydiv= document.createElement('div')
        mydiv.style = "resize: both; overflow: auto; width: 500px; height: 500px; border: 2px solid black; "
        mydiv.id = "mydiv"

        var innerdiv= document.createElement('div')
        innerdiv.id = "innerdiv"
        innerdiv.style = "resize: both; overflow: auto; width: 250px; height: 250px; border: 2px solid black; "
        
        
        mydiv.appendChild(innerdiv);

        const body= document.querySelector('body') 
        body.appendChild(mydiv);

}

//W3school stuff
function dragElement(element) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  
  document.getElementById(element.id).onmousedown = dragMouseDown;
    

  function dragMouseDown(e) {
    console.log("e");//I'm console.log the event to check whether the function is called
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    console.log(e.clientX);
    console.log(e.clientY);
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    console.log("dragging")//I'm console.log the event to check whether the function is called
    console.log(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:
    element.style.top = (element.offsetTop - pos2) + "px";
    element.style.left = (element.offsetLeft - pos1) + "px";
  }

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

我正在尝试从另一个 js 文件中调用上述函数。我的问题从这里开始。

second.js

makediv()
dragElement(document.getElementById("mydiv"));

当我将鼠标放在 div 上并尝试在 div 周围拖动时，我可以看到所有显示事件和“拖动”的日志。但是当我拖动 div 时，它并没有移动，它也没有落到我放鼠标的位置。

**通过日志，我的意思是我在 first.js 的 W3schools 部分中放置了一些 console.log 以检查功能是否正常工作。我通过 //I'm console.log 事件标记了这些 console.log 调用以检查函数是否被调用

我真的不明白，因为日志显示 dragMouseDown 和 elementDrag 正在工作，但实际上并没有拖动 div。

下面是我的html文件：

!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>testing</title>

    <script defer type="text/javascript" src='first.js'></script>
    <script defer type="text/javascript" src='second.js'></script>

 </head>
 <body>

 </body>

</html>

我的最终目标是让第一个 js 文件作为一个库运行，同时不使用其他 3rd 方库，如 jqueryui。但我被困在这里，mydiv 不可拖动。

我对 js 和 html 有点陌生。任何帮助，将不胜感激！提前致谢！

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

只是你错过了一个 CSS 属性 position: absolute，只需将其添加回来。

mydiv.style = "resize: both; overflow: auto; width: 500px; height: 500px; border: 2px solid black; position: absolute"

【讨论】：