手风琴遏制无法正常工作
Accordion Containment not working properly
我使用手风琴构建了一个 parent 和 child 系统。结构如下
parent1
child1
child2
child3
parent2
child4
child5
child6
parent3
child7
child8
child9
我还添加了一项拖放功能。我的要求是我不希望 child 应该从当前的 parent 拖出。只能在当前parent中拖动替换。例如,child 1,2 & 3 位置可以与拖动互换,但 child 2 不应允许进入 parent2 & parent3。此外,不应允许 parent2 child 拖入 parent1 和 parent2
我做了一个研究,我发现 accordion 提供了一个 属性 containment: parent 但它不能正常工作。谁能帮我解决这个问题?
<div id="available_fields_container" class="accordion list_container ui-sortable active" data-accordion="one">
<dd class="accordion-navigation active" id="data_download_fields">
<a href="#data_download_fields">
<b>FootBall Fields</b>
<span class="collapse-symbol"></span>
</a>
<span class="select-group" data-fields="#data_download_fields">Select all</span>
<div id="data_download_fields" class="content active" data-group="FootBall Fields">
<div class="field_items" data-index="4" data-group="FootBall Fields">
Andrew
<span class="plus-icon action-icon">+</span>
<i class="icon-cross2 action-icon"></i>
</div>
<div class="field_items" data-index="5" data-group="FootBall Fields">
Sam
<span class="plus-icon action-icon">+</span>
<i class="icon-cross2 action-icon"></i>
</div>
</div>
</dd>
<dd class="accordion-navigation " id="data_download_hockey_fields">
<a href="#data_download_hockey_fields">
<b>hockey Fields</b>
<span class="collapse-symbol"></span>
</a>
<span class="select-group" data-fields="#data_download_hockey_fields">Select all</span>
<div id="data_download_hockey_fields" class="content " data-group="hockey Fields">
<div class="field_items" data-index="0" data-group="hockey Fields">
jason
<span class="plus-icon action-icon">+</span>
<i class="icon-cross2 action-icon"></i>
</div>
<div class="field_items" data-index="1" data-group="hockey Fields">
Jane
<span class="plus-icon action-icon">+</span>
<i class="icon-cross2 action-icon"></i>
</div>
</div>
</dd>
</div>
为了实现这些类型的事情,您可以使用 jquery 可排序回调。
在你的情况下,你将需要 start 和 out callback
var before_drag;
start: function(event, ui){
before_drag = ui.item.parent().attr('id')
}
out: function(event, ui){
var after_drag = ui.item.parent().attr('id')
if(before_drag != after_drag){
event.preventDefault();
event.stopPropagation();
}
}
我使用手风琴构建了一个 parent 和 child 系统。结构如下
parent1
child1
child2
child3
parent2
child4
child5
child6
parent3
child7
child8
child9
我还添加了一项拖放功能。我的要求是我不希望 child 应该从当前的 parent 拖出。只能在当前parent中拖动替换。例如,child 1,2 & 3 位置可以与拖动互换,但 child 2 不应允许进入 parent2 & parent3。此外,不应允许 parent2 child 拖入 parent1 和 parent2
我做了一个研究,我发现 accordion 提供了一个 属性 containment: parent 但它不能正常工作。谁能帮我解决这个问题?
<div id="available_fields_container" class="accordion list_container ui-sortable active" data-accordion="one">
<dd class="accordion-navigation active" id="data_download_fields">
<a href="#data_download_fields">
<b>FootBall Fields</b>
<span class="collapse-symbol"></span>
</a>
<span class="select-group" data-fields="#data_download_fields">Select all</span>
<div id="data_download_fields" class="content active" data-group="FootBall Fields">
<div class="field_items" data-index="4" data-group="FootBall Fields">
Andrew
<span class="plus-icon action-icon">+</span>
<i class="icon-cross2 action-icon"></i>
</div>
<div class="field_items" data-index="5" data-group="FootBall Fields">
Sam
<span class="plus-icon action-icon">+</span>
<i class="icon-cross2 action-icon"></i>
</div>
</div>
</dd>
<dd class="accordion-navigation " id="data_download_hockey_fields">
<a href="#data_download_hockey_fields">
<b>hockey Fields</b>
<span class="collapse-symbol"></span>
</a>
<span class="select-group" data-fields="#data_download_hockey_fields">Select all</span>
<div id="data_download_hockey_fields" class="content " data-group="hockey Fields">
<div class="field_items" data-index="0" data-group="hockey Fields">
jason
<span class="plus-icon action-icon">+</span>
<i class="icon-cross2 action-icon"></i>
</div>
<div class="field_items" data-index="1" data-group="hockey Fields">
Jane
<span class="plus-icon action-icon">+</span>
<i class="icon-cross2 action-icon"></i>
</div>
</div>
</dd>
</div>
为了实现这些类型的事情,您可以使用 jquery 可排序回调。 在你的情况下,你将需要 start 和 out callback
var before_drag;
start: function(event, ui){
before_drag = ui.item.parent().attr('id')
}
out: function(event, ui){
var after_drag = ui.item.parent().attr('id')
if(before_drag != after_drag){
event.preventDefault();
event.stopPropagation();
}
}