0
데이터를 서로 교환 할 수있는 두 개의 목록이 있습니다. 내 목록 중 하나는 데이터를 삭제할 공간이있는 아코디언 목록뿐 아니라 데이터를 삭제할 수있는 더 구체적인 아코디언을 포함합니다. 테이블 사이에 데이터를 드래그 앤 드롭 할 수 있으며 아코디언 내부에서도 아코디언을 사용할 수 있습니다. 그러나 여기에도 문제가 있습니다. 전체 아코디언도 드래그 할 수 있습니다.아코디언 내의 아코디언. 데이터를 드래그하는 것만으로 데이터를 드래그하는 방법
여기 내 페이지의 그림이다 :
내가 여기에 포함 된 하위 아코디언을 포함하지 않고 아코디언 내부 항목 사이를 정렬 할 수 있어야합니다. 여기 내 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가 포함되어 내에서 더 분열을 추가하는 시도 특정 영역을 정렬 가능하도록 지정하십시오.하지만 여전히 올바르게 처리 할 수 없습니다. 어떤 도움도 환영합니다.
편집 : 나는이 작업을 내가 원하는 방식으로 만들기 위해 divs와 다른 분리 기호/클래스를 사용해야한다고 결론을 내렸지 만, 나는 길을 찾지 못했다. 아코디언으로 의도 된대로 작업하면서 동시에 동일한 형식에 가깝게 유지하십시오.