Question

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

我创建了一个名为MainAccordion
我创建了另一个名为MenuAccordion
我想将项目从MenuAccordion拖到MainAccordion

Answer 1

这是可能的，但您可能需要编写一些代码。我为你掀起了一个小提琴：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();
        }
    });
});

那我在做什么？

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

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

让我们看看第二支手风琴的掉落回调：

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();

已经准备好了。

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

我可以将一个项目从一个手风琴拖到另一个吗？

1 个答案: