3

我的要求是容器中应该有标签，用户可以将标签拖放到输入字段中。如何将放置的标签保持为标签而不是文本。

我尝试了这个插件，当我拖动一个标签并放入第一个元素的输入字段时它工作正常，但对于第二个标签，它会创建全新的容器，并且在添加第二个标签后，无法添加另一个标签。这是代码，

<ul id="draggable">
    <li>Tag1</li>
    <li>Tag2</li>
    <li>Tag3</li>
    <li>Tag4</li>
</ul>

<p id="topdropped">
    <input id="tags_1" type="text" class="tags" value="" />
</p>

$(function() {
        $("#draggable li").draggable({
            helper : 'clone'
        });
        $("#topdropped").droppable({
            drop : function(event, ui) {

                $(this).find("#tags_1").val(ui.draggable.text());
                $('#tags_1').tagsInput({
                    width : 'auto'
                });
            }
        });
    });

现场演示

4

1 回答 1

2

我像这样解决了这个问题，这是 我想要实现的演示。

在问题出现之前，我在 dropable 中调用并启动插件，就像这样

 $('#tags_1').tagsInput({
      width : 'auto'
   });

后来我发现这个插件也提供了addTag()方法，然后我调用了这个方法dropable，这解决了我的问题，而不是我喜欢的上面的代码。

if ($('#tags_1').tagExist(ui.draggable.text())) {
    alert("Already Added.");
    }else {
    $('#tags_1').addTag(ui.draggable.text());
    }

这里$('selector').tagExist()插件也提供了检查输入字段中是否已经存在标签。

这是正在工作的代码。

<ul id="draggable">
    <li>Tag1</li>
    <li>Tag2</li>
    <li>Tag3</li>
    <li>Tag4</li>
</ul>

<p id="topdropped">
    <input id="tags_1" type="text" class="tags" value="" />
</p>


<script type="text/javascript">
    $(function() {
        $('#tags_1').tagsInput({
            'defaultText' : '',
            width : 'auto',
            'interactive' : true,
        });
        $("#draggable li").draggable({
            helper : 'clone'
        });
        $("#topdropped").droppable({
            drop : function(event, ui) {                    
                if ($('#tags_1').tagExist(ui.draggable.text())) {
                    alert("Already Added.");
                }else {
                    $('#tags_1').addTag(ui.draggable.text());

                }
            }
        });
    });
</script>
于 2013-01-08T07:10:56.767 回答