gpt4 book ai didi

jQuery 可排序 Div

转载 作者:行者123 更新时间:2023-12-01 06:06:59 29 4
gpt4 key购买 nike

是否可以在两个或多个 div/boxe 之间直接排序并返回完整数据 (var order = ...)?

在线演示:http://jsbin.com/alegu4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic Drag'n Drop</title>

<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>

<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 10px;
}

ul {
margin: 0;
}

#s1,#s2 {
float: left;
width: 400px;
}

#s1 li,#s2 li {
list-style: none;
margin: 0 0 4px 0;
padding: 10px;
background-color:#00CCCC;
border: #CCCCCC solid 1px;
color:#fff;
}

</style>

<script type="text/javascript">
$(document).ready(function(){

$(function() {
$("#s1 ul,#s2 ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
//$.post("updateDB.php", order);
alert(order);
}
});
});

});
</script>

</head>
<body>

<div id="box">

<div class="box" id="s1">
<ul>
<li id="recordsArray_1">1. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_2">2. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_3">3. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_4">4. Lorem ipsum dolor sit amet, consetetur</li>
</ul>
</div>

<div class="box" id="s2">
<ul>
<li id="recordsArray_5">5. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_6">6. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_7">7. Lorem ipsum dolor sit amet, consetetur</li>
<li id="recordsArray_8">8. Lorem ipsum dolor sit amet, consetetur</li>
</ul>
</div>

</div>

</body>
</html>

请注意,这与我的其他帖子不同 - 谢谢!

最佳答案

看看我的 JSFiddle。

http://jsfiddle.net/PbDBU/1/

基本上,我将 2 个 DIV 合并为一个,并使用 float 属性设置 LI 元素。然后,我简单地将结果交错为 1,5,2,6,3,7,4,8 而不是 1,2,3,4,5,6,7,8

关于jQuery 可排序 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4739718/

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