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

Answer 1

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