jQuery ui上列表中的可排序项和子项可排序 [英] Sortable items and subitems in list on jQuery ui sortable
本文介绍了jQuery ui上列表中的可排序项和子项可排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果将任何子元素拖动到任何父元素之外，则会存储其位置.这是很多事情.元素必须回到上一个父元素. 子元素必须能够在父级和父级中移动. 父元素必须能够在它们之间移动.
If you drag any child element beyond any parent, its position is stored . This is a helluva lot . Element must go back to the previous parent. Child elements must be able to move within the parent and the parents . Parent elements must be able to move between them.
问题:
- 如何在国外父母中禁用拖动子元素?
- 如何使父母向右拖动?现在，如果 第一个父级将其拖放到PARENT#2或PARENT#3的位置， 不会动
- How to disable drag child elements abroad parents?
- How to enable parents to drag right? Now , if the example of the first parent to drag down to the place PARENT # 2 or PARENT # 3 , it will not move
代码:
<script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery-ui/1.9.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
var sortable_element = $('.sortable');
sortable_element.sortable(
{
items: ".group-caption, .group-caption .group-item",
handle: ".move",
cursor: "move",
opacity: 0.7,
containment: ".sortable",
placeholder: "movable-placeholder",
revert: 300,
delay: 150,
start: function(e, ui )
{
ui.placeholder.height(ui.helper.outerHeight());
}
});
})
</script>
<style>
.sortable {
}
.group-caption {
background: #D3CAAF;
width: 400px;
display: block;
padding: 20px;
margin: 0 0 15px 0;
}
.group-item {
background: #5E5E5E;
width: 300px;
height: 30px;
display: block;
padding: 3px;
margin: 5px;
color: #fff;
}
.move {
background: #ff0000;
width: 30px;
height: 30px;
float: right;
color: #fff;
text-align: center;
text-transform: uppercase;
line-height: 30px;
font-family: Arial;
cursor: move;
}
</style>
<div class="sortable">
<div class="group-caption">
<h4>PARENT #1</h4>
<div class="move">+</div>
<div class="group-items">
<div class="group-item">CHILD #1<div class="move">+</div></div>
<div class="group-item">CHILD #2<div class="move">+</div></div>
<div class="group-item">CHILD #3<div class="move">+</div></div>
<div class="group-item">CHILD #4<div class="move">+</div></div>
<div class="group-item">CHILD #5<div class="move">+</div></div>
<div class="group-item">CHILD #6<div class="move">+</div></div>
<div class="group-item">CHILD #7<div class="move">+</div></div>
<div class="group-item">CHILD #8<div class="move">+</div></div>
<div class="group-item">CHILD #9<div class="move">+</div></div>
<div class="group-item">CHILD #10<div class="move">+</div></div>
<div class="group-item">CHILD #11<div class="move">+</div></div>
<div class="group-item">CHILD #12<div class="move">+</div></div>
<div class="group-item">CHILD #13<div class="move">+</div></div>
<div class="group-item">CHILD #14<div class="move">+</div></div>
<div class="group-item">CHILD #15<div class="move">+</div></div>
<div class="group-item">CHILD #16<div class="move">+</div></div>
</div>
</div>
<div class="group-caption">
<h4>PARENT #2</h4>
<div class="move">+</div>
<div class="group-items">
<div class="group-item">CHILD #1<div class="move">+</div></div>
<div class="group-item">CHILD #2<div class="move">+</div></div>
<div class="group-item">CHILD #3<div class="move">+</div></div>
<div class="group-item">CHILD #4<div class="move">+</div></div>
</div>
</div>
<div class="group-caption">
<h4>PARENT #3</h4>
<div class="move">+</div>
<div class="group-items">
<div class="group-item">CHILD #1<div class="move">+</div></div>
<div class="group-item">CHILD #2<div class="move">+</div></div>
<div class="group-item">CHILD #3<div class="move">+</div></div>
<div class="group-item">CHILD #4<div class="move">+</div></div>
<div class="group-item">CHILD #5<div class="move">+</div></div>
<div class="group-item">CHILD #6<div class="move">+</div></div>
<div class="group-item">CHILD #7<div class="move">+</div></div>
<div class="group-item">CHILD #8<div class="move">+</div></div>
</div>
</div>
</div>
推荐答案
如果我对您的理解正确，则需要两个可排序对象-一个用于父母，一个用于孩子，然后孩子应该connectWith父母，并且您需要一个tolerance属性.
If I understand you correctly you need two sortables - one for the parents and one for the children and then the children should connectWith the parents and you need a tolerance property.
// Sort the parents
$(".sortable").sortable({
containment: "parent",
items: "> div",
handle: ".move",
tolerance: "pointer",
cursor: "move",
opacity: 0.7,
revert: 300,
delay: 150,
dropOnEmpty: true,
placeholder: "movable-placeholder",
start: function(e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
}
};
// Sort the children
$(".group-items").sortable({
containment: "parent",
items: "> div",
tolerance: "pointer",
connectWith: '.group-items'
});
请参阅我的小提琴演示.
更新#1
更新了小提琴演示，仅允许子级绑定到其父级.
Updated Fiddle demo to only allow children to bind to its parent.
这篇关于jQuery ui上列表中的可排序项和子项可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
