具有多个UL的Jquery UI嵌套排序
具有多个UL的Jquery UI嵌套排序
提问于 2012-04-17 22:50:49
我正在尝试使用多个UL来实现jquery UI nested sortables。下面是代码，
<html>
<head>
<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#example5 ul").sortable({
connectWith: "#example5 ul",
placeholder: "ui-state-highlight"
});
$("span.item-controls").click(function(){
//alert($(this).parent().next('div').attr('class'))
var v = $(this).parent().next('div.panel');
v.slideToggle("slow");
});
});
</script>
<style>
ul {
min-height:10px;
}
li {
margin:5px;
width:auto;
border:1px solid #000;
list-style-type:none;
cursor:move;
}
#example5 {
display: inline-block;
float: left;
position: relative;
width:900px;
}
.fright
{
float:right;
}
.item-controls {
cursor: pointer;
font-size: 12px;
position: relative;
right: 20px;
top: 5px;
background: url("images/arrows.png") no-repeat scroll transparent;
xborder: 1px solid #000;
background-position:3px 0px;
width:20px;
height:15px;
}.ui-sortable{
margin:0px;padding:0px;
}
.ahead
{
margin:0px;
}
div.panel
{
height:auto;
display:none;
}
div.panel
{
margin:0px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div id="example5"><!--UL1-->
<ul style="width:32%;float:left;" class="navigation">
<li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1</p>
</div>
<ul>
<li >
<p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1 1</p>
</div>
<ul></ul></li>
<li >Item 1 2<ul></ul></li>
<li >Item 1 3<ul></ul></li>
</ul>
</li>
<li >
<p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 2</p>
</div>
<ul><li >Item 2 1<ul></ul></li></ul>
</li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
<!--UL2-->
<ul style="width:32%;float:left;" class="navigation2">
<li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1</p>
</div>
<ul>
<li >
<p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1 1</p>
</div>
<ul></ul></li>
<li >Item 1 2<ul></ul></li>
<li >Item 1 3<ul></ul></li>
</ul>
</li>
<li >
<p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 2</p>
</div>
<ul><li >Item 2 1<ul></ul></li></ul>
</li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
<!--UL3-->
<ul style="width:32%;float:left;" class="navigation3">
<li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1</p>
</div>
<ul>
<li >
<p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1 1</p>
</div>
<ul></ul></li>
<li >Item 1 2<ul></ul></li>
<li >Item 1 3<ul></ul></li>
</ul>
</li>
<li >
<p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 2</p>
</div>
<ul><li >Item 2 1<ul></ul></li></ul>
</li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
</div>
</body>
</html> 到目前为止一切顺利，得到了预期的结果。现在我的要求是，从UL-1不应该是可排序的UL-2 and UL-3也从UL-2,UL-3不应该是可排序的together.Hope你理解这个要求。有可能做到这一点吗。关于这一点，请多多指教。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-04-18 17:21:10
试着用这种方式
$("#example5 ul").sortable({
connectWith: "#example5 ul.navigation *",
placeholder: "ui-state-highlight"
});因此，您的目标将始终是您的主UL，而其余仅用于可排序的元素。
注意：
为了使用这个解决方案，我给你的html部分添加了不同的类名。
Stack Overflow用户
发布于 2012-04-18 00:29:18
您必须设置“容器”，例如：
$("#example5 ul").sortable({
connectWith: "#example5 ul",
placeholder: "ui-state-highlight",
containment: "#selector"
});有关更多信息，请访问check this.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10193557
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号