我想在网页中移动一个 html 元素，但我能找到的所有示例都与将一个元素移动到另一个元素有关:
event.target.appendChild(document.getElementById(data));
我找不到在空网页上移动元素的方法(我不想使用 div，因为我想创建一个工作流生成器)
这是w3schools的代码，我去掉了不需要的信息，这段代码有2个div和一个段落元素，你可以拖动<p>在两者之间div s，但不在他们之外，这是我想做的，任何建议将不胜感激:
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
//this is what I don't want to do, I want to move the paragraph freely
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
最佳答案
jquery 可拖拽支持听起来像你想要的 - 此处演示了在框中移动矩形:https://jqueryui.com/draggable/
关于javascript - 使用 HTML CSS 和 JS 拖动对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35248378/