使用 HTML CSS 和 JS 拖动对象

Drag an object using HTML CSS and JS

本文关键字：拖动 对象 JS HTML CSS 使用      更新时间：2023-09-26

我想在网页内移动一个html元素，但我能找到的所有例子都与将一个元素移动到另一个元素有关：

event.target.appendChild(document.getElementById(data));
我

找不到在空网页上移动元素的方法（我不想使用div，因为我想创建一个工作流生成器）

这是来自w3schools的代码，我删除了不需要的信息，这段代码有2个div和一个段落元素，你可以在两个div之间拖动<p>，但不能在它们外面，这就是我想做的，任何建议将不胜感激：

<!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/

然后让你的身体可掉落：

<body class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">

或者只是将所有内容嵌套在div 中：

<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  ... all the rest comes here
</div>
</body>
相关文章：