如何將一個div拖動到另一個div的位置？
[英]how to drag a div to the position of another div?
問題描述
我是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>
1 個解決方案
解決方案1
2 已采納 2014-08-26 16:21:38
最簡單的方法： http : //jqueryui.com/sortable/
這是來自jQuery示例的代碼：
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
如何在另一個div上方放置一個div？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.