我有兩個列表可以在它們自己之間交換數據。我的其中一個列表是手風琴列表,您可以放置數據的空間,但也包含更多特定的手風琴,這些手風琴也允許將數據放入其中。我可以在表格之間拖放數據,甚至可以在手風琴內的手風琴中拖放數據,但這裏有個問題:我也可以拖動整個手風琴。手風琴內的手風琴;如何讓排序只拖動數據而不是手風琴本身
這裏是我的頁面的圖片:
我希望能夠在不包括子手風琴,它們含有的手風琴內部項目之間進行排序。這裏是我的jQuery函數:
<script>
$(function() {
$("#catalog").accordion({ collapsible: true, active: false, autoHeight: false });
$(".subcatalog").accordion({ collapsible: true, active: false, autoHeight: false });
$(".SpecificCatalog").sortable({
connectWith: ".ui-widget-content, .GeneralCatalog", helper: "clone",
appendTo: "body",
stop: function (event, ui) {
//console.log((this).sortable('toArray', { attribute: 'value' }));
console.log(ui.item);
console.log(ui.item.text());
}
});
$(".ui-widget-content").sortable({
connectWith: ".SpecificCatalog, .GeneralCatalog", helper: "clone",
appendTo: "body",
stop: function (event, ui) {
//console.log((this).sortable('toArray', { attribute: 'value' }));
console.log(ui.item);
console.log(ui.item.text());
}
});
$(".GeneralCatalog").sortable({
connectWith: ".SpecificCatalog, .ui-widget-content", helper: "clone",
appendTo: "body",
stop: function (event, ui) {
//console.log((this).sortable('toArray', { attribute: 'value' }));
console.log(ui.item);
console.log(ui.item.text());
}
});
});
</script>
這是我的HTML(包含邏輯來動態創建手風琴):
<div id="content">
<div id="ListaCodigos">
<h2 class="ui-widget-header">CodigoAgrupador</h2>
<div id="products">
<div id="catalog">
@foreach (CodigoAgrupadorCuentas_CE c in Model.CodigosAgrupadores)
{
if (unchecked(double.Parse(c.CodigoAgrupador) == (int)double.Parse(c.CodigoAgrupador)))
{
<h3><a href="#">@c.CodigoAgrupador - @c.NombreCuenta</a></h3>
<div>
<div class="subcatalog">
@foreach (CodigoAgrupadorCuentas_CE c2 in Model.CodigosAgrupadores)
{
if (double.Parse(c2.CodigoAgrupador) > double.Parse(c.CodigoAgrupador) && double.Parse(c2.CodigoAgrupador) < (double.Parse(c.CodigoAgrupador) + 1))
{
<h4><a href="#">@c2.CodigoAgrupador - @c2.NombreCuenta</a></h4>
<div>
<div class="SpecificCatalog">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
}
}
</div>
<div class="GeneralCatalog">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
}
}
</div>
</div>
</div>
<div id="cart">
<h2 class="ui-widget-header">Catalogos</h2>
<div class="ui-widget-content">
@foreach (LedgerChartOfAccounts c in Model.Catalogos)
{
if (c.CodigoAgrupador == null)
{
<ul>
<li class="draggable">@c.GLAccountNumber - @c.GLAccountName </li>
</ul>
}
}
</div>
</div>
<div>
<footer>Inserte los catalogos en el grupo que pertenescan, jale.</footer>
</div>
</div>
我已經嘗試過內的不同ID的包含,以增加更多的部門指定某些區域是可排序的,但我似乎仍然看不清楚。歡迎任何幫助。
編輯:我來,我需要爲了使這項工作,我希望它成爲的方式與我的div使用不同的分隔符/班的結論,但我被困在尋找一種方法來使事情仍然保持接近相同的格式,同時,按照手風琴的意圖進行工作。