0

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

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

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 代码 - 容器

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

最后一项是对应产品拖到容器中时容器应该有的东西。

查询

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

现在，它都保存为列表项，即全部在单独的行中

4

1 回答 1

0

我使用解决了这个问题

  • 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
                });
于 2013-01-16T10:37:30.313 回答