Fatal编程技术网

Javascript 可拖动jQuery元素

javascript html jquery css

Javascript 可拖动jQuery元素,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我正在尝试实现从W3schools到js文件的拖放功能 这是我所指的“拖来拖去”的链接 下面是我的js文件，它创建了一个div，并实现了W3中的拖放功能 first.js function makediv() { var mydiv= document.createElement('div') mydiv.style = "resize: both; overflow: auto; width: 500px; height: 500px; border

我正在尝试实现从W3schools到js文件的拖放功能

这是我所指的“拖来拖去”的链接

下面是我的js文件，它创建了一个div，并实现了W3中的拖放功能

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时，它没有移动，也没有被放到我拖动的位置

**关于日志，我的意思是我在.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>

！DOCTYPE html>
测试
我的最终目标是使第一个js文件作为库工作，而不使用其他第三方库，如jqueryui。但我被困在这里了，我的div无法拖动

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

很简单，您错过了一个CSS属性，它是
position:absolute
，只需重新添加即可

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