javascript - 可拖动的 jQuery 元素
问题描述
我正在尝试实现从 W3schools 到我的 js 文件的拖动操作。
这是我所指的拖动事物的链接。
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable
下面是我的 js 文件,它制作了一个 div 并实现了 w3schools 的拖动功能。
第一个.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 文件中调用上述函数。我的问题从这里开始。
第二个.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 文件作为库工作,而不使用其他第三方库,如 jqueryui。但是我被困在这里, mydiv 不是可拖动的。
我对 js 和 html 有点陌生。任何帮助,将不胜感激!提前致谢!
解决方案
很简单,您错过了一个 CSS 属性position: absolute
,只需将其添加回来。
mydiv.style = "resize: both; overflow: auto; width: 500px; height: 500px; border: 2px solid black; position: absolute"
推荐阅读
- c# - 从手机的文件系统写入文本文件并将文件复制到桌面
- sql - 如何将不同日期的开始时间和结束时间拆分为每日表?
- java - 如何在Spring中将数据从一条路径传递到另一条路径
- javascript - Javascript 将 WeekNum 嵌入到我的日历中
- java - 如何将数据从一个游标发送到另一个游标并保存在sqlite中
- java - 如何捕获一个值并告诉用户再次输入?
- excel - PowerQuery 合并列
- html - 防止孩子假设动态宽度父级的全宽
- python - 如何在 Python 中将 GeoDataFrame 保存到磁盘?
- regex - 如何在clojure中通过正则表达式返回命名空间?