Question

我一直试图解决这个问题无济于事。

我有一个容器div和一个产品div。产品是可拖动的，容器可以放置和分类，只接受产品。产品是多个列表项。我在draggable事件中使用了helper函数来创建一个列表项，并将多个列表项附加到它，以便发送到容器。但是，我真正想要的是从所有列表项中收集文本并将其全部归入一个列表项。我该怎么做？

HTML代码 - 产品

<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 JQUERY

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

现在，它全部保存为列表项i.e. all on separate lines

Answer 1

我使用

解决了这个问题

first（），我用来克隆列表项，
each（），我曾经迭代过位箱列表项以获取文本

有点追加，我们在家免费：）

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

如何在可拖动的div中获取列表项的文本？

1 个答案: