手风琴内的手风琴;如何让排序只拖动数据而不是手风琴本身
问题描述:
我有两个列表可以在它们自己之间交换数据。我的其中一个列表是手风琴列表,您可以放置数据的空间,但也包含更多特定的手风琴,这些手风琴也允许将数据放入其中。我可以在表格之间拖放数据,甚至可以在手风琴内的手风琴中拖放数据,但这里有个问题:我也可以拖动整个手风琴。手风琴内的手风琴;如何让排序只拖动数据而不是手风琴本身
这里是我的页面的图片:
我希望能够在不包括子手风琴,它们含有的手风琴内部项目之间进行排序。这里是我的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使用不同的分隔符/班的结论,但我被困在寻找一种方法来使事情仍然保持接近相同的格式,同时,按照手风琴的意图进行工作。
答
我终于得到了一个良好的夜间睡眠,并仔细查看代码后,解决了它。事实证明这是这个类:“.ui-widget-content”一直是问题。
通过使用它作为我的jquery函数连接,实际上我将任何手风琴内的所有东西都包含在内,这就是为什么即使我使用多个div类来分隔元素,我也有很多“bug”和“毛刺”。
在我的第二个列表中,我改变了我的div类从
<div id="ui-widget-content">
到
<div id="codigosAgrupadores>
,并在jQuery的功能改变了代码以反映更改。