Question

我有以下HTML逻辑块：

第一个是可排序的手风琴清单
第二个是清单可伸缩的手风琴。这些元素可以添加到可排序的手风琴中。

所以我想移动我的可拖动元素，以便用可排序的手风琴添加它们。它工作得很好，除了当我的元素在可排序的手风琴中掉落时，它无法打开。

这是我的JavaScript代码：

$(function() {
$( "> div", "#questionsDispos" ).draggable({
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    handle: "h3",
    connectToSortable: ".questions"
});

$( ".questions" ).accordion({
    header: "> div > h3",
    collapsible: true,
    active: false,
    autoHeight: false
}).sortable({
    handle: "h3",
    receive: function(event, ui) {
        $(ui.item).removeClass();
        $(ui.item).removeAttr("style");
    }
});

$( "#questionsDispos" ).accordion({
    header: "> div > h3",
    collapsible: true,
    active: false,
    autoHeight: false
});
});

这是我的HTML：

<div class="questions">
    <div>
        <h3><a href="#">Question 1. My First Question ?</a></h3>
        <div>
            First content<br />
        </div>
    </div>

    <div>
        <h3><a href="#">Question 2. My Second Question ?</a></h3>
        <div>
            Second content<br />
        </div>
    </div>

    <div>
        <h3><a href="#">Question 3. My Third Question ?</a></h3>
        <div>
            Third content<br />
        </div>
    </div>
</div>

Questions disponibles :<br />
<div id="questionsDispos">
    <div>
        <h3><a href="#">Something</a></h3>
        <div>
            My Content Here<br />
        </div>
    </div>
</div>

请注意，我使用了jquery-ui-1.8.11.custom.min.patch.js的修补版本，以便在sortable的receive事件中使用ui.item。（我用它来删除一些类，以使移动的元素看起来像其他类）。您可以在此处下载：http://www.toofiles.com/fr/oip/documents/js/jquery-ui-1811customminpatch.html

编辑：我在这里发布了一个演示版，您可以对其进行测试：http://jsfiddle.net/t3tVA/ 正如你所看到的，当你在顶部的手风琴中放下“Something”时，它就再也无法打开了

有没有人有解决方案？感谢

Answer 1

根据this错误，这不是你现在可以开箱即用的东西。但是，如果您查看错误报告，则有人通过向代码库添加额外的autoActive选项来提供解决方案。

另一种方法是在手风琴中放下一个元素后摧毁手风琴并重建。工作样本：

http://jsfiddle.net/t3tVA/1/

JQuery手风琴在被拖放后不会打开

1 个答案: