I am facing an issue with my two lists that can exchange data. In one list, I have accordions where data can be dropped, and these accordions also contain nested accordions allowing for further data dropping. While I am able to drag and drop data between tables and even within nested accordions, the problem arises when I accidentally drag entire accordions.
Below is a screenshot of my webpage:
The goal is to sort items within an accordion without including the sub-accordions they contain. Here are the JQuery functions I am using:
<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(ui.item);
console.log(ui.item.text());
}
});
$(".ui-widget-content").sortable({
connectWith: ".SpecificCatalog, .GeneralCatalog", helper: "clone",
appendTo: "body",
stop: function (event, ui) {
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(ui.item);
console.log(ui.item.text());
}
});
});
</script>
Below is the HTML code which dynamically creates the accordions:
<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>Insert catalogos into their respective group by dragging.</footer>
</div>
</div>
I have attempted creating different divisions with unique classes or separators to make the sorting work as intended while keeping the format consistent. However, I am still unable to achieve the desired functionality. Any suggestions would be greatly appreciated.
EDIT: After some exploration, I believe utilizing various classes and separators within the divs is crucial to achieving the desired result. I am struggling to maintain the current format while ensuring proper functionality with the accordions.