CODEWITHSUNDEEP
jquery-uijquery-ui-accordion
Romain Guidoux
Romain Guidoux

Reputation: 2951

JQuery accordion which does not open itself after being dragged and dropped

I have the following HTML logical blocks :

Demo here : http://jsfiddle.net/t3tVA/

So I would like to move my draggable elements in order to add them with the sortable accordions. It works fine, excepts that when my element is dropped among the sortable accordions, it cannot be opened.

Here is my JavaScript code :

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

And here is my 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>

Please note that I use a patched version of jquery-ui-1.8.11.custom.min.patch.js in order to use ui.item in the receive event of sortable. (I use it to remove some classes in order to make the moved element look like the other ones). You can download it here : http://www.toofiles.com/fr/oip/documents/js/jquery-ui-1811customminpatch.html

EDIT : I posted a demo here so you can test it : http://jsfiddle.net/t3tVA/ As you can see, when you drop "Something" among the accordions on the top, it can not be opened anymore

Does anyone has a solution ? Thanks

Upvotes: 1

Views: 797

Answers (1)

Richard
Richard

Reputation: 1289

According to this bug, this isn't something you can do now out of the box. However, if you look at the bug report someone has provided a solution by adding an extra autoActive option to the codebase.

An alternative is to destroy the accordion and rebuild after a element has been dropped in your accordion. Working sample:

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

Upvotes: 1

Related Questions