JQuery UI可拖动标签

Question

我的要求是：在一个容器中应该有标签，用户可以拖动标签并将其放置在输入框中。如何将已放置的标签保留为标签而不是文本。

我尝试使用这个插件，当我将一个标签拖动到输入框中时，对于第一个元素它能正常工作，但是对于第二个标签，它会创建全新的容器，并且在添加了第二个标签后就无法添加其他标签了。 以下是代码：

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

Live demo

- Noor

---

你能举个例子来解释一下吗？比如说它是如何工作的，而不是它想要做什么？ - Rajagopal 웃

我已经解决了这个问题，而且我试图回答，但是Stackoverflow.com不允许我在6小时之前回答自己提出的问题。JSfiddle上的演示正是我想要的。谢谢。 - Noor

Answer 1

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

在出现问题之前，我是这样在可放置区域中调用和初始化插件的：

 $('#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>

- Noor