JQuery Dragable tags

[Noor-ul-amin]

I have requirements that there will be tags in a container, and user can drag tags and put in the input field. And I have maintain the dropped tag as tag not as text.

I tried this(http://xoxco.com/clickable/jquery-tags-input) plugin and tried, when I drag a tag and drop in the input field for the first element it works fine but when I add second tag then it create total new container, and after adding second tag then another tag can not be added.
Here is my code,

<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 can be seen on here http://jsfiddle.net/Noorulamin/jDxvQ/5/