CODEWITHSUNDEEP
jqueryjquery-uiaccordiondraggabledroppable
A1Gard
A1Gard

Reputation: 4168

JQuery UI - Drag and Drop clone with two accordions

I have two accordion in my code.

The first is the 'source' the second is the 'destination'.

I want to drag from the source and drop into the destination to clone the item, the result will have the item in both source and destination.

I can't seem to clone the item, any help in fixing it?

HTML Code:

<ul class="accordion" id="source">
    <li>
        <h3>item1</h3>
        <div> description</div>
    </li>
    <li>
        <h3>item 2</h3>
        <div>description</div>
    </li>
</ul>

<ul id="destination" class="accordion">
     <li class="placeholder">add your item here</li>
</ul>

Javascript code:

$(function () {


    $(".accordion").accordion({
         collapsible: true
    });
    $("#source li").draggable({
        appendTo: "body",
        helper: "clone"
    });
    $("#destination").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {
            console.log(ui.draggable.attr('data-class'));
            $(ui.draggable).clone().appendTo(this); // accordion not work 
            //$(ui.draggable).appendTo(this); // accordion work but not clone

        }
    })
});

sample: http://jsfiddle.net/8ZhL4/1/

Upvotes: 0

Views: 2385

Answers (1)

D.S
D.S

Reputation: 11

add $(".accordion").accordion('refresh'); in Drop function.

sample: http://jsfiddle.net/8ZhL4/2/

Upvotes: 1

Related Questions