CODEWITHSUNDEEP
jqueryjquery-uidraggabledroppable
Boga
Boga

Reputation: 371

jQuery UI - Draggable + Droppable entire list

I'm trying to create a Draggable + Droppable list, and so far i've managed to make it work with single items of the list.

But i want to be able to drag and drop an entire list. Is that possible?

What i have is a nested accordian with a few lists and a droppable div to receive the items:

<div>
<div id="faqs-container" style="float: left; width: 250px"  class="accordian">
<h3><a href="#">One</a></h3>
<div class="accordian">
    <h3><a class=href="#">A</a></h3>
        <div>
            <ul>
                <li>list1</li>
                <li>list2</li>
                <li>list3</li>
            </ul>
        </div>
        <h3><a href="#">B</a></h3>
        <div>    
            <ul>
                <li>list4</li>
                <li>list5</li>
                <li>list6</li>
            </ul>
       </div>
</div>
<div style="float: right; width: 200px">
                <div class="grupoFinal">
                    <div class="ui-widget-content">
                        <ol>
                            <li class="placeholder">Drop here!</li>
                        </ol>
                    </div>
                </div>
            </div>
</div>

And with jquery i make it work:

$("div.accordian").accordion({
    autoHeight: false,
    collapsible: true,
    active: false,


});
$("div.accordian li").draggable({
    //appendTo: "body",
    helper: "clone"
});
$(".grupoFinal ol").droppable({
    drop: function (event, ui) {
    $(this).find(".placeholder").remove();
    $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }
});

Here i have a working demo.

So, what i want do do is to drag an entire list, for example, list A, and drop all the item inside on the droppable div. Is it possible?

Upvotes: 1

Views: 4191

Answers (2)

Praveen
Praveen

Reputation: 56501

Instead of pointing li you can use ul

$("div.accordian ul").draggable({
    //appendTo: "body",
    helper: "clone"
});
$(".grupoFinal ol").droppable({
    drop: function (event, ui) {
    $(this).find(".placeholder").remove();
    $("<ul></ul>").text(ui.draggable.text()).appendTo(this);
    //---  get the next element
    $("<li></li>").text(ui.draggable.next('div').text()).appendTo(this);
    }
});

This makes the whole list as draggable.

Upvotes: 0

clurect
clurect

Reputation: 359

I have basically what you are looking for, you might need to fiddle with it. My changes are here http://jsfiddle.net/XD3d9/12/

First I gave the h3 a class, the name was just random.

<h3 class="boots"><a  href="#">A</a></h3>

Then I needed to make it draggable, simple.

$('.boots').draggable({
   helper: 'clone'
});

Then I needed to figure out which element was being dragged. When you drag the h3 it takes every thing from that list and puts it on one line into the new list. If you wanted it broken apart I left that part to you to figure out, you should be able to ;).

$(".grupoFinal ol").droppable({
 drop: function (event, ui) {
  $(this).find(".placeholder").remove();
    if (ui.draggable.prop('tagName') === 'LI') {
        $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }
    if (ui.draggable.prop('tagName') === 'H3') {
        $("<li></li>").text(ui.draggable.next('div').text()).appendTo(this);
    }
 }
});

Upvotes: 2

Related Questions