1

是否可以通过从另一个手风琴拖动项目来将项目添加到手风琴控件？

  1. 我创建了一个名为MainAccordion
  2. 我创造了另一个名为MenuAccordion
  3. 我想将项目MenuAccordion从MainAccordion
4

1 回答 1

3

这是可能的，尽管您可能需要编写一些代码。我为你准备了一个小提琴：http: //jsfiddle.net/LfaRk/1/

让我们来看看它。HTML 很简单，与 CSS 相同。

JavaScript：

$(function () {
    $("#catalog").accordion();
    $("#catalog2").accordion();
    $("#catalog h2").draggable({
        appendTo: "body",
        helper: "clone"
    });
    $("#catalog2").droppable({
        drop: function (event, ui) {
            var content = ui.draggable.next();
            ui.draggable.draggable('disable').appendTo(this);
            content.appendTo(this);
            $("#catalog").accordion('destroy').accordion();
            $("#catalog2").accordion('destroy').accordion();
        }
    });
});

那我在做什么？

  • 我正在初始化 2 个手风琴，使用.accordion().
  • 我正在制作第一个手风琴的标题draggable。
  • 我正在制作第二个手风琴droppable。

（我开始的代码是：http: //jqueryui.com/droppable/#shopping-cart，你也应该检查一下）

让我们看看第二个手风琴的 drop 回调：

drop: function (event, ui) {
    var content = ui.draggable.next();
    ui.draggable.draggable('disable').appendTo(this);
    content.appendTo(this);
    $("#catalog").accordion('destroy').accordion();
    $("#catalog2").accordion('destroy').accordion();
}

这里发生了什么？

是当前ui.draggable被拖动的 jQuery 包装元素。我需要将它插入到第二个手风琴中。因此我可以调用ui.draggable.appendto(this)，但它仍然是可拖动的，所以我也需要使其不可拖动。

我需要用标题移动内容，所以我用: 选择内容，var content = ui.draggable.next()然后用: 移动它content.appendTo(this);。this仍然是可放置的元素（第二个手风琴）。

最后，我需要重新初始化手风琴，以便元素识别它们的位置：

$("#catalog").accordion('destroy').accordion();
$("#catalog2").accordion('destroy').accordion();

它已经准备好了。

如果您想让项目可以前后拖动，您可能需要编写更多代码。此外，如果您希望手风琴可排序，可放置和可排序似乎以有趣的方式交互，因此可能需要进行一些试验。

于 2013-05-05T12:51:37.573 回答