gpt4 book ai didi

javascript - 如何将一个div拖到另一个div的位置?

转载 作者:太空宇宙 更新时间:2023-11-04 03:36:24 26 4
gpt4 key购买 nike

我是 html 和 jquery 的新手...我想在另一个下面创建 3 个 div,例如 div1、div2 等等...并且 div 应该是可拖动的,现在我想将 div1 拖动到的位置div3..现在顺序应该是 div3,div1,div2,...我该怎么做?

请帮帮我...

<html>
<head>
<title>My First Template </title>
<style type="text/css">

html {
background: url(Software.png) no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
</style>


<link rel="stylesheet" href="stylesheets/jquery.sidr.dark.css">

<script src="jquery.js" ></script>

<script src="jquery.sidr.min.js"></script>

<link rel="stylesheet" type="text/css" media="all" href="SignUp.css">

<script src="jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#div1").draggable();
$("#div2").draggable();
$("#div3").draggable();
$("#div4").draggable();
});
</script>
</head>


<body>

<div id="div1" style="position: relative; left: 850px; top: 100px; width: 500px; height: 100px; background-color: white">div1</div>
<div id="div2" style="position: relative; left: 850px; top: 150px; width: 500px; height: 100px; background-color: blue">div2</div>
<div id="div3" style="position: relative; left: 850px; top: 200px; width: 500px; height: 100px; background-color: green">div3</div>
<div id="div4" style="position: relative; left: 850px; top: 250px; width: 500px; height: 100px; background-color: red">div4</div>
</body>

</html>

最佳答案

最简单的方法:http://jqueryui.com/sortable/

这是 jQuery 示例的代码:

$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});

关于javascript - 如何将一个div拖到另一个div的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25510457/

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