gpt4 book ai didi

javascript - 使用 HTML CSS 和 JS 拖动对象

转载 作者:可可西里 更新时间:2023-11-01 13:04:04 26 4
gpt4 key购买 nike

我想在网页中移动一个 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com