How can I get the text of a list item in a draggable div?

Question

I've been trying to fix this to no avail.

I have a container div and a product div. The products are draggable, and the container is droppable and sortable, and accepts only products. The products are multiple list items. I have used the helper function in the draggable event to create a list item, and append the multiple list items to it, to be sent to the container. However, what I actually want is to collect the text from all the list items and club it all into one list item. How do I do that?

HTML CODE - PRODUCT

<div class="phrase product ui-draggable">
<ul>
        <li class="bit-box">Atlanta<a href="#"></a></li>
        <li class="bit-box">London<a href="#"></a></li>
        <li class="bit-box">Mumbai<a href="#"></a></li>
        <li class="bit-input"><input type="text" class="maininput" /></li>
</ul>

HTML CODE - CONTAINER

<div id="container" style="border: 2px solid red; height: 400px;" class="ui-droppable ui-sortable ui-state-highlight">
<li class="containerproduct">Rio</li>
<li class="containerproduct">Santiago</li>
<li class="containerproduct">Atlanta London Mumbai</li>

The last item is what the container should have when the corresponding product is dragged to the container.

THE JQUERY

    $(".product").draggable({
    helper: function (e,ui) {
        return $("<li class=\"containerproduct\">asd</li>").append($(this).find('.bit-box').clone().removeClass());
    },
    axis: 'y',
    revert : true
    });

Right now, it's all saved as list items, i.e. all on separate lines

http://jsfiddle.net/parikramatic/QS2RV/ This is close to the real code. You cannot any new tags apart from the existing one, but if you did, you get each tag on a different line after dragging — Freakishly, Jan 13 '13 at 10:08
This isn't the exact code since it's missing some libraries. I saw what the code was doing, and reduced it to what I've asked above. — Freakishly, Jan 13 '13 at 10:09
What is the specific line of code that generates the output? — ATOzTOA, Jan 13 '13 at 10:25
Those two list items already exist in the container (Rio and Santiago). When the
is dragged, it is converted into the Atlanta London Mumbai list item, because it takes the text of all three list items in the div, and combines it into one. Hope that helps :) — Freakishly, Jan 13 '13 at 12:08
What is the exact output you are getting when you drag and drop the `div` with "Atlanta, London, Mumbai"? — ATOzTOA, Jan 13 '13 at 12:35

score 0 · Accepted Answer · answered Jan 16 '13 at 10:37

I solved this problem using

first(), which I used to clone the list item, and
each(), which I used to iterate over the bit-box list items to get their text

Bit of appending, and we're home free :)

            $(".product").draggable({
                distance: 10,
                cursor: "move",
                helper: function (e, ui) {
                    var newListItem = $(this).find('.bit-box').first().clone().removeClass().addClass("ui-state-default");
                    var fullCommand = "";
                    $(this).find('.bit-box').each(function( index ) {
                        fullCommand += $(this).text() + " ";
                    });

                    newListItem.text(fullCommand);
                    return (newListItem);
                },
                revert : true
                });

How can I get the text of a list item in a draggable div?

1 Answers1