排序后如何显示父级的新顺序? [英] How to display the new order of the parent after sorting?
问题描述
这是我当前的代码.这些代码对父级和子级都进行排序,但排序后仅显示子级的新顺序.
Here are my current codes. These codes sort both parent and child but it display only the new order of the child after sorting.
模板
<div id="tree">
<ul id="envelopes" class="dropcat cat-data">
<li id="1">
<span class="cat-title">Utilities</span>
<ul class="dropenv mt">
<li class="innerList">Electricity</li>
<li class="innerList">Water</li>
<li class="innerList">Trash</li>
<li class="innerList">Television</li>
</ul>
</li>
<li id="2">
<span class="cat-title">Sample</span>
<ul class="dropenv mt">
<li class="innerList">Test</li>
</ul>
</li>
<li id="3">
<span class="cat-title">Saving</span>
<ul class="dropenv mt">
<li class="innerList">College Fund</li>
<li class="innerList">Retirement Fund</li>
<li class="innerList">Emergency Fund</li>
</ul>
</li>
</ul>
</div>
<p id="cl"></p>
js
<script>
var addPositions = function() {
$('.dropenv, .dropcat').each(function() {
var position = 0;
$(this).children().each(function() {
$(this).data('position', position);
position++;
});
});
};
$(document).ready(function() {
addPositions();
var origTitle;
var origColor;
$(".dropenv").sortable({
connectWith: "ul.mt",
dropOnEmpty: true,
start: function(event, ui) {
origColor = ui.item.text();
origTitle = ui.item.parent().siblings('.cat-title').text();
},
stop: function(event, ui) {
var order = [];
ui.item.closest('ul').children('li').each(function() {
order.push($(this).data('position'));
var c = $(this).text();
if (c === origColor) {
var z = origTitle;
} else {
var z = $(this).parent().siblings('.cat-title').text();
}
$("#cl").append(z + "_" + c + "<br /\>");
});
}
});
$( "ul.dropcat").sortable({
connectWith: "ul.cat-data",
dropOnEmpty: true,
});
});
</script>
如何获得父母的新订单?
例如:
Before:
- Utilities
- Sample
- Saving
//If I'm going to swap Saving to Utilities, it must be display the new order like this
New Order:
- Saving
- Sample
- Utilities
从@Jack Shedd更新
我复制stop
并得到以下输出:
I copy the stop
and I get this output:
_ Utilities Electricity Water Natural Gas Home Phone Cell Phones Trash Television Internet
_ Charity/Giving Charitable Gifts Fast Offerings
_ Sample test
_ Recreation Entertainment Vacation
_ Saving College Fund Emergency Fund Retirement Fund
如何只生父母,没有孩子?
How to get parent only, no child?
推荐答案
基于代码和问题:
- 您在
sortable
对象上有一个自定义的stop
事件处理程序,在用户停止拖动之后,该事件处理程序会将子级的新位置附加到#cl段落标记的innerHTML中. - 您想知道为什么这适用于孩子,而不适用于父母.
- You have a custom
stop
event handler on yoursortable
object which, after the user stops dragging, will append the new position of the child to the innerHTML of the #cl paragraph tag. - You're wondering why this works for the children, but not the parent.
如果您查看jQuery,您将看到以下行:
If you look at your jQuery, you'll see this line:
$(".dropenv").sortable({
这会将sortable
行为应用于具有.dropenv
类的任何元素.在这里,您正在初始化自定义stop
事件处理程序,该事件处理程序将更新#cl标签.
This is applying the sortable
behavior to any element with a class of .dropenv
. It's here that you're initing the custom stop
event handler which updates the #cl tag.
但是,您仅将此行为应用于类为.dropenv
的元素,该类将检查html的父元素:
However, you're only applying this behavior to elements with a class of .dropenv
, which, reviewing your html for the parent:
<ul id="envelopes" class="dropcat cat-data">
父UL不匹配.
相反,您正在对父级应用全新的sortable
行为:
Instead, you're applying an entirely new sortable
behavior to the parent:
$( "ul.dropcat").sortable({
connectWith: "ul.cat-data",
dropOnEmpty: true,
});
其中没有任何自定义的stop
处理程序代码.
Which has none of the custom stop
handler code contained within it.
因此,可以将stop
处理程序代码从.dropenv
可排序选项复制到上面的选项中,或者将.dropenv
可排序选项也应用于您的.dropcat
UL.
So either copy the stop
handler code from the .dropenv
sortable options into the one above, or make the .dropenv
sortable apply to your .dropcat
UL as well.
这篇关于排序后如何显示父级的新顺序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!